<template>
	<view class="page" v-if="Object.keys(orderSettlementInfo).length > 0">
		<view class="live">
			<image v-if="detailInfo.images && detailInfo.images.length > 0" mode="aspectFill" class="wh-100"
				:src="selctImage"></image>
			<image v-else class="wh-100" mode="aspectFill" :src="detailInfo.cover"></image>
			<view class="back-box" :class="{ active: isHeadActive }">
				<view class="back">
					<image @click="goBack" class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back_w.png"
						v-if="!isHeadActive">
					</image>
					<image @click="goBack" class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png"
						v-if="isHeadActive">
					</image>
					<text class="text ft-32 fw-800 c-ff" :class="{ 'c-33': isHeadActive }">{{ detailInfo.cate_name
					}}详情

					</text>

					<view :style="{ width: (selectData.menuButtonRight ? selectData.menuButtonRight : 90) + 'px' }"
						style="color: aqua;height: 100px;">
					</view>
				</view>
			</view>
			<view class="top flex-bwt">
				<view v-if="detailInfo.is_live === 1" @click="goLive" class="player flex-center" style="
            background-image: url('https://cdn.oss.bon-top.cn/static_bc/images/bg_samll.png');
            background-size: 100% 100%;
          ">
					<image class="wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/icon6.png"></image>

					<text style="color: #ff0000" class="live-txt ml-12">正在直播</text>
				</view>
				<view class="share flex-center">
					<image class="wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/shareIcon.png"></image>
					<text class="ft ml-12">分享</text>
					<!-- 隐藏的原生分享按钮 -->
					<button open-type="share" class="hidden-share-btn" ref="shareBtnRef" @click="triggerShare"></button>
				</view>
			</view>
			<!-- 视频播放模块 -->
			<view class="playVideo" v-if="isPlayShow">
				<video class="vdplayer" :id="'vdplayer'" :ref="'vdplayer'" :src="playVideoUrl" :controls="true"
					:loop="true" :autoplay="true" :muted="isMuted" :show-center-play-btn="true" object-fit="contain"
					@play="isPlaying = true" @timeupdate="handleTimeUpdate"
					:style="{ width: '750rpx', height: '440rpx' }"></video>
			</view>
			<view class="second flex" v-if="detailInfo.videos.length > 0">

				<image v-if="isMuted" @click="isMuted = false" class="wh-52"
					src="https://cdn.oss.bon-top.cn/static_bc/images/mute.png"></image>
				<image v-else @click="isMuted = true" class="wh-52"
					src="https://cdn.oss.bon-top.cn/static_bc/images/muted.png"></image>
				<!-- 				<view class="flex mr-20 ml-20" style="flex: 1">
					<view class="tip mr-20 flex-center" v-for="item in detailInfo.videos" :key="item.id"
						@click="playVideoed(item)">
						<image class="wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/icon8.png"></image>
						<text class="ft c-ff ml-8 ft-lue"
							style="width: fit-content;max-width: 120rpx;">{{ item.product_info.name }}</text>
					</view>
				</view> -->
				<view class="ml-20" style="width: 630rpx;">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="tip mr-20" v-for="item in detailInfo.videos" :key="item.id"
							@click="playVideoed(item)">
							<image class="wh-32 mt-10 mr-10"
								src="https://cdn.oss.bon-top.cn/static_bc/images/icon8.png"></image>
							<text class="ft c-ff ml-8 ft-lue"
								style="width: fit-content;max-width: 120rpx;display: inline-block;">{{
									item.product_info.name }}</text>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="tabList flex">
				<view style="opacity: 1" v-for="(item, index) in tabItems" :key="index" class="tab-item flex-center"
					:class="{ active: currentTab === item.id }" @click="switchTab(item.id)">
					<text>{{ item.desc }}</text>
					<view class="line"></view>
				</view>
			</view>
		</view>
		<view v-if="currentTab === 1">
			<view class="imgList flex-bwt" v-if="detailInfo.images && detailInfo.images.length > 0">
				<view style="width: 548rpx;">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="imgitem mr-10" v-for="(item, index) in detailInfo.images" :key="index"
							:class="{ active: imgAc === index }" @click="selectImg(index, item)">
							<image class="wh-100" mode="aspectFill" style="border-radius: 20rpx;" :src="item"></image>
						</view>
					</scroll-view>
				</view>
				<view class="flex" @click="goVedio(detailInfo.id)">
					<text class="ft mr-10">更多({{ detailInfo.images.length }})</text>
					<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>

			</view>

			<view class="activity auto mt-20">
				<image v-if="detailInfo.preferentials_ad" class="imgs" :src="detailInfo.preferentials_ad"
					mode="widthFix"></image>
				<image v-else class="imgs" :src="detailInfo.last_tag_info?.ad" mode="widthFix"></image>
			</view>
			<view class="posti auto flex">
				<view class="mingxi mr-20 flex-center" @click="showOffers = true"><text
						class="ft mr-10 c-33">汇算明细</text>
					<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
				<view class="shoucang flex-center"
					v-if="detailInfo.conllect_list && detailInfo.conllect_list.length > 0">
					<image class="wh-38" style="border-radius: 50%" :src="detailInfo.conllect_list[0].avatar"></image>
					<text class="ft ml-10">{{ detailInfo.conllect_list[0].nickname_show }}</text>
				</view>
				<view class="isSaleOut" v-if="detailInfo.is_sellout === 1">
					<image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/slodOut.png"></image>
				</view>
			</view>
			<view style="padding-left: 30rpx" class="price auto ft flex fw-800">
				{{ selectProJectitem.show_currency_symbol }}<text class="ft-num fw-900">{{
					selectProJectitem.bc_price_show }}</text><text class="ft fw-800">/{{ selectProJectitem.price_label
					}}</text>
				<view class="tag ml-12 flex-center ft ft-20" v-if="detailInfo.last_tag_info">
					{{ detailInfo.last_tag_info.name }}
				</view>
			</view>
			<view style="padding-left: 30rpx;margin-top: 20rpx;" class="ft c-99 flex"
				v-if="selectProJectitem.old_price || selectProJectitem.peer_price_show"><text class="delft"
					v-if="selectProJectitem.old_price">{{
						selectProJectitem?.show_currency_symbol ?? "￥" }}<text class="ft-num ft-24 c-99 fw-900">{{
						selectProJectitem.old_price }}</text>/白菜原价</text>
				<text class="line"
					style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 10rpx;margin-right: 10rpx;"
					v-if="selectProJectitem.old_price && selectProJectitem.peer_price_show"></text>
				<text v-if="selectProJectitem?.peer_price_show" class="delft">{{
					selectProJectitem?.show_currency_symbol ?? "￥" }}
					<text class="ft-num ft-24 c-99 fw-900">{{
						selectProJectitem?.peer_price_show }}</text>/同行价</text>
			</view>
			<view class="discount pd-20 auto mt-30"
				v-if="selectProJectitem.coupon_reduce_list && selectProJectitem.coupon_reduce_list.length > 0">
				<view class="discount_item flex-bwt">
					<!-- <view class="ft-24 fw-800">{{ detailInfo.last_tag_info.title }} | {{detailInfo.last_tag_info.name }} </view> -->
					<view class="ft-24 fw-800 fs0">
						<text v-for="(item, index) in detailInfo.preferentials" :key="item.id">
							{{ item.name }}
							<text v-if="index + 1 < detailInfo.preferentials.length"
								style="display: inline-block;width: 2rpx;height: 20rpx;background: #333;margin-right: 10rpx;"></text>
						</text>
					</view>
					<view class="ft c-9c fs0">
						剩余时间：{{ detailInfo.last_tag_info.d }}天{{ detailInfo.last_tag_info.h }}时
						{{ detailInfo.last_tag_info.m }}分
					</view>
				</view>
				<view class="feesList flex pd-20 mt-12">
					<view class="fees flex-center mr-20" v-for="(item, index) in selectProJectitem.coupon_reduce_list"
						:key="index">
						<view class="ft-num ft-28">{{ item.currency_symbol + item.reduce }}</view>
						<view class="ft-22" style="white-space: nowrap;color: #333333;">{{ item.type_name }}</view>
					</view>

				</view>
				<view class="get-btn flex-center" @click="showQuan = true">
					<text class="ft mr-10">领优惠券</text>
					<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
			</view>
			<view class="vip auto mt-20 pd-20 flex-bwt" v-if="selectProJectitem.is_show_vip_reduce == 1">
				<view>
					<view class="ft1 c-ff">会员权益</view>
					<view class="ft mt-10 c-dbf">
						{{ selectProJectitem.vip_coupon_data.type_name +
							selectProJectitem.vip_coupon_data.discount + '折(不叠加)-' +
							selectProJectitem.vip_coupon_data.currency_symbol +
							selectProJectitem.vip_coupon_data.reduce }}
					</view>
				</view>
				<view class="open flex-center" @click="goBuyVip" v-if="selectProJectitem.vip_coupon_data.is_vip === 0">
					<text class="ft mr-12">开通会员</text>
					<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
				<view class="open flex-center" v-else>
					<text class="ft mr-12">已享会员价</text>
				</view>
			</view>
			<view @click="showYue = true" class="prompt  mt-24 ml-30 ft flex" v-if="detailInfo.activity_info">
				<text>{{ detailInfo.activity_info.name }}</text>
				<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/ques.png"></image>
			</view>
			<view class="tipList ml-30" v-if="detailInfo.activitys.length > 0">
				<template v-for="item in detailInfo.activitys" :key="item.id">
					<view class="tipItem ft  mt-20 mr-20 c-9c flex-center" v-if="item.is_other == 0"> {{ item.name }}
					</view>
				</template>
			</view>
			<view class="combo auto pd-20 mt-30">
				<view class="head">
					<text v-if="detailInfo.recommends_show && detailInfo.recommends_show.length > 0"
						class="tag ft ft-20 mr-12 fs0" v-for="item in detailInfo.recommends_show" :key="item.id">{{ item
						}}</text>
					<text class="ft1">
						{{ isShow ? detailInfo.name.slice(0, 30) + '...'
							: detailInfo.name }}
					</text>

					<!-- 收起展开 -->
					<image class="wh-24 ml-8 mt-8 fs0 headImg"
						src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png" @click="openL" v-if="isShow">
					</image>
					<image @click="closeL" v-else class="wh-24 ml-8 mt-8 fs0 headImg"
						src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png">
					</image>



				</view>
				<view>
					<text class="ft c-bbq" v-for="item in detailInfo.tags" :key="item.id" @click="goTags(item.id)">{{
						"#" +
						item.name + " " }}</text>
				</view>
				<view class="paihang pd-20 mt-20 flex-bwt" @click="goPaihang">
					<text class="ft">白菜咨询排行榜 <text class="ft-num ft-20">NO{{ detailInfo.consult_rank }}</text></text>
					<image class="w-20h-34" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
				</view>
				<view class="type pd-20 mt-20">
					<view class="flex-bwt" @click="showTao = true">
						<text><text class="ft c-99">选择 </text>
							<text class="ft ml-40">{{ selectProJectitem.name }}</text></text>
						<image class="w-20h-34" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
						</image>
					</view>
					<view class="mt-12 flex-bwt">
						<text><text class="ft c-99">办理 </text>
							<text class="ft ml-40"> {{ selectProJectitem.cycle }}</text></text>
						<!-- <image
              class="w-20h-34"
              src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"
            ></image> -->
					</view>
					<view class="mt-12 flex-bwt" @click="showFuwu = true">
						<text><text class="ft c-99">服务 </text>
							<text class="ft ml-40">{{ selectProJectitem.service_info.name }}</text></text>
						<image class="w-20h-34" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
						</image>
					</view>
				</view>
			</view>
			<view class="compare auto mt-30">
				<view class="ft1 pd-20"><text class="c-dbf">业内</text><text class="ft1 c-ff">比价</text>
				</view>
				<view class="content pd-20">
					<view>
						<text class="ft c-99">项目名称</text>
						<text class="ft ml-40">{{ selectProJectitem.name }}</text>
					</view>
					<view class="flex mt-12">
						<view style="width: 190rpx" class="ft c-99">费用名称</view>
						<view class="ft">办理费用含（服务费）或（服务费+管理费/发行费+律师费+提升费用）</view>
					</view>
					<view class="mt-24 flex">
						<view class="baicai mr-12 ft flex-center"> 白菜移民</view>
						<text class="ft-num">VS</text>
						<text class="yenei ft flex-center ml-12">业内公司</text>
					</view>
					<view class="vsPrice pd-20 flex">
						<view style="border-right: 2rpx solid #F1F1F1; padding-right: 20rpx">
							<view class="item ft">白菜移民</view>
							<view class="item ft mt-24" v-if="selectProJectitem.comparison.length > 0">
								{{ selectProJectitem.comparison[0].company_info.name }}
							</view>
						</view>
						<view style=""></view>
						<view style="padding-left: 20rpx">
							<view class="item1 ft">
								{{ selectProJectitem.show_currency_symbol }}
								{{ selectProJectitem.bc_price_show }} ({{ selectProJectitem.show_currency_name }})
							</view>
							<view class="item1 ft mt-24" v-if="selectProJectitem.comparison.length > 0">
								{{ selectProJectitem.comparison[0].currency_symbol }}
								{{ selectProJectitem.comparison[0].price }}
								({{ selectProJectitem.comparison[0].currency_name }})
							</view>
						</view>
					</view>
					<view class="btn flex-center" @click="goBijia(selectProJectitem.product_id)">
						<text class="ft">更多({{ selectProJectitem.comparison.length }}家)</text>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
						</image>
					</view>
				</view>
			</view>
			<view class="guanf auto pd-20 mt-24">
				<view class="flex-bwt" @click="showPinf = true">
					<view class="flex rea">
						<image class="wh-56 mr-8" style="border-radius: 50%"
							src="https://cdn.oss.bon-top.cn/static_bc/images/a_logo.png"></image>
						<image class="wh-22 pos" src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png">
						</image>
						<text class="ft1">白菜官方评分&获批率</text>
					</view>
					<view>
						<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
					</view>
				</view>
				<view class="cont mt-24 pd-20">
					<view class="ft"><text class="ft c-99">项目</text><text class="ft ml-40">{{
						selectProJectitem.name
					}}</text></view>
					<view class="flex-bwt mt-20"
						@click="goPage('/subpackage/brandParty/brandPartyDetail?id=' + detailInfo?.check_spec_data?.brand_info?.id)">
						<view>
							<text class="ft c-99">品牌</text><text class="ft ml-40">{{
								selectProJectitem.brand_info.name
							}}</text>
						</view>
						<view class="w-20h-34">
							<image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png">
							</image>
						</view>
					</view>
					<view class="ft mt-20 flex"><text class="ft c-99">评分</text><text class="ft ml-40">{{
						selectProJectitem.score }}分</text>
						<!-- <up-rate size="22rpx" activeColor="#333" :value="selectProJectitem.score" readonly></up-rate> -->
						<comRate ref="comRate" v-if="selectProJectitem.score" :num="selectProJectitem.score"
							:noVal="true" disabled>
						</comRate>
					</view>
					<view class="ft mt-20 flex">
						<view style="width: 78rpx" class="ft c-99">获批率</view>
						<view class="ft ml-12">白菜移民获批率 {{ selectProJectitem.w_rate }}
							{{ selectProJectitem.w_rate_from ? ("（" + selectProJectitem.w_rate_from + "）") : '' }}
						</view>
					</view>
					<view class="ft mt-20"><text class="ft c-99">地区</text><text class="ft ml-40">{{
						detailInfo.country_info.name
					}}</text></view>
				</view>
			</view>
			<view class="teacher mt-24 auto pd-20" v-if="selectProJectitem.sales.lenth > 0">
				<view class="ft1">专业老师</view>
				<view>
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
						<view class="scroll-view-item_B mt-24" v-for="item in selectProJectitem.sales" :key="item.id"
							@click="goTeaDetail(item.id)">
							<view class="first flex auto mt-24">
								<view class="avtor flex-center">
									<view class="picture">
										<image class="wh-100" style="border-radius: 50%;" :src="item.avatar"></image>
									</view>
								</view>
								<view class="name ml-24">
									<view class="shenfen ft" style="font-size: 20rpx; color: #999999">
										{{ item.title }}
									</view>
									<view class="mingchen ft mt-12"
										style="color: #333333; font-weight: 800; font-size: 28rpx">{{
											item.nickname }}
									</view>
								</view>
							</view>

							<view class="wordpress auto c-66 mt-24 pd-12 ft">
								<view class="text"> {{
									item.des
								}}</view>
							</view>
							<view class="button flex mt-12 ml-20">
								<text class="ft" style="color: #fff; margin-left: 12rpx; margin-right: 12rpx">
									{{ "预约咨询" }}
								</text>
								<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon11.png">
								</image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="pngpa mt-30 pd-20 auto">
				<view class="ft1">品牌方介绍</view>
				<view class="mt-20 pinpai">
					<view class="pic">
						<image style="border-radius: 40rpx;" class="wh-100" mode="widthFix"
							:src="selectProJectitem.brand_info.cover"></image>
					</view>
					<view class="pd-20">
						<view class="flex" style="flex-wrap: wrap;width: 630rpx;">
							<view class="ft cad mb-20 flex-center"
								v-for="(item, index) in selectProJectitem.brand_info.tag" :key="index">
								{{ item }}
							</view>
						</view>
						<rich-text :nodes="selectProJectStr" class="ft" style="line-height: 46rpx;"></rich-text>
					</view>
				</view>
				<view class="btn flex-center"
					@click="goPage('/subpackage/brandParty/brandPartyDetail?id=' + detailInfo?.check_spec_data?.brand_info?.id)">
					<text class="ft mr-10">查看更多</text>
					<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
			</view>
			<view class="comInfo mt-30 pd-20 auto">
				<view class="ft1">基本信息</view>
				<view class="flex mt-24">
					<view class="ft info mr-20 c-99">国家</view>
					<view class="ft c-33">{{ detailInfo.country_info?.name ?? "暂无数据" }}</view>
				</view>
				<template v-if="detailInfo.cate_name == '移民'">
					<view class="flex mt-20">
						<view class="ft info mr-20 c-99">地区洲</view>
						<view class="ft c-33">{{ detailInfo.country_info?.parent_name ?? "暂无数据" }}</view>
					</view>
					<view class="flex mt-20">
						<view class="ft info mr-20 c-99">身份类别</view>
						<view class="ft c-33">{{ detailInfo?.imm_identity_cate ?? "暂无数据" }}</view>
					</view>
					<view class="flex mt-20">
						<view class="ft info mr-20 c-99">办理类别</view>
						<view class="ft c-33">{{ detailInfo?.imm_handle_cate ?? "暂无数据" }}</view>
					</view>
					<view class="flex mt-20">
						<view class="ft info mr-20 c-99">办理周期</view>
						<view class="ft c-33">{{ detailInfo?.imm_handle_cycle ?? "暂无数据" }}</view>
					</view>
					<view class="flex mt-20">
						<view class="ft info mr-20 c-99">办理获批时间</view>
						<view class="ft c-33">{{ detailInfo?.imm_approved_time ?? "暂无数据" }}</view>
					</view>
					<view class="flex mt-20">
						<view class="ft info mr-20 c-99">投资退出时间</view>
						<view class="ft c-33">{{ detailInfo?.imm_exit_invest_time ?? "暂无数据" }}</view>
					</view>
					<view class="flex mt-20">
						<view class="ft info mr-20 c-99">居住要求</view>
						<view class="ft c-33">{{ detailInfo?.imm_live_require ?? "暂无数据" }}</view>
					</view>
					<view class="flex mt-20">
						<view class="ft info mr-20 c-99">资金来源</view>
						<view class="ft c-33">{{ detailInfo?.imm_funding_source ?? "暂无数据" }}</view>
					</view>
					<view class="flex mt-20">
						<view class="ft info mr-20 c-99">无犯罪要求</view>
						<view class="ft c-33">{{ detailInfo?.imm_nocrime_require ?? "暂无数据" }}</view>
					</view>
					<view class="flex mt-20">
						<view class="ft info mr-20 c-99">带父母要求</view>
						<view class="ft c-33">{{ detailInfo?.imm_parent_require ?? "暂无数据" }}</view>
					</view>
					<view class="flex mt-20">
						<view class="ft info mr-20 c-99">带子女要求</view>
						<view class="ft c-33">{{ detailInfo?.imm_children_require ?? "暂无数据" }}</view>
					</view>
				</template>
				<view class="ft1 mt-40">项目介绍</view>
				<view class="mt-20 ft"><rich-text :nodes="detailInfo.des" style="line-height: 46rpx;"></rich-text>
				</view>
				<!-- <view class="img mt-20">
          <image
            class="wh-100"
            src="https://cdn.oss.bon-top.cn/static_bc/images/proj_bg.png"
          ></image>
        </view> -->
				<view class="ft1 mt-40" v-if="detailInfo.materials && detailInfo.materials.length > 0">项目文件资料</view>
				<view class="office mt-20 pd-20 flex-bwt" v-for="item in detailInfo.materials" :key="item.id">
					<view class="flex">
						<image v-if="item.suffix === 'pdf'" class="w-66h-76"
							src="https://cdn.oss.bon-top.cn/static_bc/images/PDF.png"></image>
						<image v-else-if="item.suffix === 'xlsx' || item.suffix === 'xls'" class="w-66h-76"
							src="https://cdn.oss.bon-top.cn/static_bc/images/X.png"></image>
						<image v-else-if="item.suffix === 'docx' || item.suffix === 'doc'" class="w-66h-76"
							src="https://cdn.oss.bon-top.cn/static_bc/images/W.png"></image>
						<image class="w-66h-76" src="https://cdn.oss.bon-top.cn/static_bc/images/PDF.png" v-else>
						</image>
						<view class="ft ml-8">
							<view class="ft1">{{ item.origin_name }}</view>
							<view class="ft c-99 mt-10">{{ item.created_at + " | " + item.size_info }}</view>
						</view>
					</view>
					<!-- <view class="ft c-99" @click="seeOffice(item.url, item.suffix)">查看</view> -->
					<view class="ft c-99" @click="openContract(item)">查看</view>
				</view>
				<template v-if="detailInfo.advantage">
					<view class="ft1 mt-40">项目优势</view>
					<view class="mt-20 ft" style="line-height: 46rpx;white-space: pre-wrap;">{{ detailInfo.advantage }}
					</view>
				</template>
				<template v-if="detailInfo.process">
					<view class="ft1 mt-40">项目购买流程</view>
					<view class="mt-20 ft" style="line-height: 46rpx;white-space: pre-wrap;">{{ detailInfo.process }}
					</view>
				</template>
				<template v-if="detailInfo.control_process">
					<view class="ft1 mt-40">项目风控流程</view>
					<view class="mt-20 ft" style="line-height: 46rpx;white-space: pre-wrap;">
						{{ detailInfo.control_process }}
					</view>
				</template>
			</view>
			<view class="comInfo mt-40 pd-20 auto" v-if="detailInfo.other_content">
				<view class="ft1">其它说明</view>
				<view class="mt-20 ft" style="line-height: 46rpx;white-space: pre-wrap;">{{ detailInfo.other_content }}
				</view>
			</view>
			<view style="padding-top: 15rpx; margin-bottom: 260rpx" class="sign auto">
				<view class="top">
					<view class="left">
						<view class="up">#热门项目#</view>
						<view class="down ft-eng">Popular Projects </view>
					</view>
					<view class="more" @click="goMorePro">
						<text class="text">更多</text>
						<image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
					</view>
				</view>

				<view class="pd-20">
					<ComProjectList v-if="productList.length > 0" :dataList="productList">
					</ComProjectList>
				</view>



				<view class="com-empty" v-if="productList.length == 0">暂无数据</view>
			</view>
		</view>
		<view v-if="currentTab === 2">
			<view class="pingjia pd-30">
				<view class="haopin pd-20 flex">
					<view class="right" style="border-right: 2rpx solid #F1F1F1; padding-right: 20rpx">
						<view class="ft"><text class="ft1">{{ evaluateInfo.good_percent }}%</text><text
								class="ft c-99">好评率</text>
						</view>
						<view class="mt-20">
							<!-- 							<up-rate :value="evaluateInfo.avg_star" activeColor="#333" size="22rpx"
								readonly></up-rate> -->
							<comRate ref="comRate" v-if="evaluateInfo.avg_star" :num="evaluateInfo.avg_star" disabled>
							</comRate>
						</view>
					</view>
					<view class="ft ml-20">
						<view class="ft c-33 fw-800">共有{{ evaluateInfo.pageInfo.total }}条评论</view>
						<view class="ft mt-20 c-99">{{ detailInfo.buy_num }}人已下单</view>
					</view>
				</view>
				<view class="flex tabList mt-10">
					<template v-for="(item, index) in tabList" :key="item.id">
						<view v-if="item.num > 0 || !item.id" :class="{ active: selctTab === item.id }"
							class="tab ft flex-center c-99" @click="selectTabs(item.id)">
							{{ item.des + item.num + "" }}
						</view>
					</template>
				</view>
				<view class="thrumb mt-30 flex pd-20" v-if="evaluateInfo.like_list.length > 0">
					<view style="width: 526rpx;">
						<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
							<view class="flex">
								<!--<view class="avtor" v-for="(item, index) in evaluateInfo.like_list" :key="index">
									 <image class="img" :src="item.avatar" mode="aspectFill"></image>
									<image class="img2" src="https://cdn.oss.bon-top.cn/static_bc/images/tumb.png">
									</image> 
								</view>-->
								<avtorGroup v-if="evaluateInfo.like_list.length > 0" :gap="-32"
									:avatars="evaluateInfo.like_list.map((item) => item.avatar)" size="72">
								</avtorGroup>
							</view>

						</scroll-view>
					</view>
					<view class="ft flex-center c-66" style="min-width: 200rpx;">
						<image class="wh-40 mr-4" src="https://cdn.oss.bon-top.cn/static_bc/images/zan_emoj.png"
							mode="aspectFit">
						</image>
						{{ evaluateInfo.like_num + '人点赞了' }}
					</view>
				</view>
				<template v-for="(item, index) in evaluateList" :key="index">
					<commentCard :parmas="item" @refresh="selectTabs(selctTab)"
						@refreshOne="refreshEvaluateInfo(index)"></commentCard>
				</template>
				<view class="com-empty" v-if="evaluateList.length == 0">暂无数据</view>
				<view style="margin-bottom: 240rpx"></view>
			</view>
		</view>
		<view v-if="currentTab === 3">
			<view class="interlocution pd-30">
				<view class="card_one pd-20">
					<view class="flex-bwt">
						<view class="ft1">{{ "共有" + qaInfo.pageInfo.total + "个问题" }}</view>
						<view class="buttom flex-center" @click="handleProplem">
							<text class="ft c-ff mr-10">{{
								"我要提问"
							}}</text>
							<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/tiwen.png"></image>
						</view>
					</view>
					<view class="flex" style="margin-top: 6rpx;">
						<!-- <avtor-group
							:avatars="qaInfo.answer_data.items.map((item) => { return item.user_info.avatar })"></avtor-group> -->

						<avtorGroup v-if="qaInfo.answer_data.items.length > 0" :gap="-22"
							:avatars="qaInfo.answer_data.items.map((item) => item.user_info.avatar)" size="48">
						</avtorGroup>
						<view style="margin-left: 10rpx;font-size: 24rpx;color: #666666;">
							{{ qaInfo.answer_data.pageInfo.total }}人参与回答
						</view>
					</view>
				</view>
				<view class="cardList">
					<view class="card1 mt-20 pd-20" v-for="item in qaList" :key="item.id">
						<view class=""
							style="width: 650rpx;background: #FFFFFF;border-radius: 40rpx;padding: 20rpx;padding: 20rpx;box-sizing: border-box;">
							<view class="card2 flex-bwt" style="align-items: flex-start;">
								<view class="left">
									<view>
										<view class="flex" style="align-items: flex-start;">
											<view class="wen ft c-ff">问</view>
											<view class="problem ml-20 ft1">
												<text class="wt_my" style="color: #fda517;" v-if="item.is_my">我
													&nbsp;</text>
												{{ item.name }}
											</view>
										</view>
										<view class="flex mt-12" style="align-items: flex-start;">
											<view class="da ft">{{ "答" }}</view>
											<view class="problem ft ml-20 c-99">{{
												item.answer_info ? item.answer_info.content : '待我回答'
											}}</view>
										</view>
									</view>
								</view>
								<view class="right">
									<image class="wh-100 bd-r40" :src="item.product_info.cover" mode="aspectFill">
									</image>
								</view>
							</view>
							<view class="flex-bwt"
								style="border-top: 2rpx solid #F1F1F1;padding-top: 20rpx;margin-top: 20rpx;">
								<view class="ft1">
									<text class="ft c-99 ml-12">{{ item.answer_count + "人回答了" }}</text>
								</view>
								<view class="ft1 c-99">
									<!-- <avtor-group
										:avatars="item.answer_user_list.map((item) => { return item.user_info.avatar })"></avtor-group> -->
									<!-- <avtorGroup
										v-if="item.answer_user_list.map((item) => item.user_info.avatar).length > 0"
										:avatars="item.answer_user_list.map((item) => item.user_info.avatar)"
										size="48">
									</avtorGroup> -->
									<avtorGroup v-if="item.answer_user_list.length > 0"
										:avatars="item.answer_user_list.map((item) => item.user_info.avatar)" size="48">
									</avtorGroup>
								</view>
							</view>
						</view>

						<view class="watch flex-center" @click="goDetail(item.id)">
							<text class="ft">查看详情</text>
							<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
							</image>
						</view>
					</view>
					<view class="com-empty" v-if="qaList.length == 0">暂无数据</view>
				</view>
				<view style="margin-bottom: 240rpx"></view>
			</view>
		</view>
		<view v-if="currentTab === 4">
			<view class="example pd-30">
				<view class="card_two pd-20">
					<view class="flex">
						<view class="ft c-99">项目名称</view>
						<view class="ft ml-40">{{ detailInfo.name }}</view>
					</view>
					<view class="flex mt-12">
						<view style="width: 96rpx" class="ft c-99">位置</view>
						<view class="ft ml-40">{{ detailInfo.country_info.name }}</view>
					</view>
				</view>
				<view class="card_three mt-20 pd-20" v-if="detailInfo.apply_crowd && detailInfo.apply_crowd.length > 0">
					<view class="ft1">适用人群</view>
					<!-- 					<view class="ft c-99 ml-40 mt-20">咨询用户分析：</view>
					<view class="uchartsBox ml-30 mt-20">
						<qiun-data-charts type="radar" :opts="opts" :chartData="chartData" />
					</view> -->
					<!-- <view class="ft c-99 ml-40 mt-20">适用人群：</view> -->
					<view class="flex-eve mt-20" style="flex-wrap: wrap;">
						<view class="tiplist flex" v-for="(item, index) in detailInfo.apply_crowd" :key="index">
							<view class="ft tip c-dbf">{{ index + 1 }}</view>
							<view class="ft">{{ item }}</view>
						</view>
					</view>
				</view>
				<view class="case mt-20">
					<view style="font-weight: 800;font-size: 28rpx;color: #333333;">过往案例展示</view>
					<view class="caseItem" v-for="item in caseList" :key="item.id">
						<view
							style="width: 650rpx;background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);border-radius: 40rpx;">
							<view class="ft c-99 mt-20 ml-20">
								{{ "订购商品：" }}
							</view>
							<view class="flex-bwt ml-20 mt-20 mr-20 pb-20" style="border-bottom: 2rpx #f1f1f1 solid">
								<text class="ft1">{{ item.product_info?.name }}</text>
								<!-- 							<view class="detail flex-center ft">
															<text class="ft mr-8">{{ "查看商品" }}</text>
															<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
															</image>
														</view> -->
							</view>
							<view class="flex ft c-99 mt-20 ml-20" style="align-items: flex-start;">
								<view style="flex-shrink: 0;">{{ "订购时间：" }}</view>
								<text class="ft c-33">{{ item.order_time }}</text>
							</view>
							<view class="flex ft c-99 mt-20 ml-20" style="align-items: flex-start;">
								<view style="flex-shrink: 0;">{{ "交付时间：" }}</view>
								<text class="ft c-33">{{ item.deliver_time }}</text>
							</view>
							<view class="flex ft c-99 mt-20 ml-20" style="align-items: flex-start;">
								<view style="flex-shrink: 0;">{{ "办理结束：" }}</view>
								<text class="ft c-33">{{ item.handle_result }}</text>
							</view>
							<view class="flex ft c-99 mt-20 ml-20" style="align-items: flex-start;">
								<view style="flex-shrink: 0;">{{ "办理周期：" }}</view>
								<text class="ft c-33">{{ item.handle_cycle }}</text>
							</view>
							<view class="flex ft c-99 mt-20 ml-20" style="align-items: flex-start;">
								<view style="flex-shrink: 0;">{{ "客户条件：" }}</view>
								<text class="ft c-33">{{ item.customer_condition }}</text>
							</view>
							<template v-if="item.images && item.images.length > 0">
								<view class="ft c-99 mt-20 ml-20">
									{{ "案例图片：" }}
								</view>
								<view class="imgGroup flex"
									style="width: 650rpx;flex-wrap: wrap;padding-bottom: 20rpx;">
									<image v-for="(img, index) in item.images" :key="index" class="group"
										style="margin-left: 18rpx;margin-top: 10rpx;" :src="img" mode="aspectFill"
										@click="openImg(index, item.images)">
									</image>
								</view>
							</template>
						</view>
						<view class="watch flex-center" @click="goDetail1(item.id)">
							<text class="ft">查看详情</text>
							<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
							</image>
						</view>
					</view>
					<view class="com-empty" v-if="caseList.length == 0">暂无数据</view>
				</view>
				<view style="margin-bottom: 240rpx"></view>
			</view>
		</view>


		<!-- 		<view @click="showYue=true" class="prompt  mt-24 ml-30 ft flex" v-if="detailInfo.activity_info">
			<text>{{ detailInfo.activity_info.name }}</text>
			<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/ques.png"></image>
		</view> -->

		<view style="height: 132rpx;" v-if="orderSettlementInfo.group_buy_data && orderSettlementInfo.group_data">
		</view>
		<view class="payCard" v-if="!projectIshow">
			<view class="three" v-if="orderSettlementInfo.group_buy_data && orderSettlementInfo.group_data">
				<view class="flex-bwt">
					<view style="font-weight: 800;font-size: 24rpx;color: #333333;">
						2人成团{{ orderSettlementInfo.group_data.is_pay == 1 ? '立减' : '返券' }}
						￥{{ orderSettlementInfo.group_buy_data.reduce }}</view>
					<view class="flex-end">
						<view class="mr-10" style="font-weight: 800;font-size: 24rpx;color: #333333;">剩余拼团时间</view>
						<!-- <template v-if="orderSettlementInfo.group_buy_data.d > 0">
							<view class="time">{{ orderSettlementInfo.group_buy_data.d }}天</view>
							<view class="time-i">:</view>
						</template>
						<view class="time">{{ orderSettlementInfo.group_buy_data.h }}</view>
						<view class="time-i">:</view>
						<view class="time">{{ orderSettlementInfo.group_buy_data.m }}</view>
						<view class="time-i">:</view>
						<view class="time">{{ orderSettlementInfo.group_buy_data.s }}</view> -->
						<comTimeOut :size="20" :time="orderSettlementInfo.group_buy_data?.end_time"></comTimeOut>

					</view>
				</view>
				<view class="flex-bwt mt-20">
					<view class="flex">
						<view class="txt" style="font-size: 22rpx;color: #999999;margin-right: 4rpx;">拼单说明</view>
						<image class="wh-22" src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png"></image>
					</view>
					<view class="flex-end">
						<view class="mr-10" style="font-weight: 800;font-size: 24rpx;color: #333333;">好友正邀请您成团</view>
						<image class="wh-40 bd-r50c" :src="orderSettlementInfo.group_data.user_info.avatar"
							mode="aspectFill">
						</image>
						<image class="ml-10 mr-10" style="width: 16rpx;height: 16rpx;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/add.png"></image>
						<image class="wh-40" src="https://cdn.oss.bon-top.cn/static_bc/images/group_add.png"
							mode="widthFix">
						</image>
					</view>
				</view>
			</view>
			<view class="one pd-20 flex-bwt">
				<view class="flex" @click="showYue = true"><template v-if="detailInfo.activity_info"><text
							class="ft mr-8">{{ detailInfo.activity_info.name }}</text>
						<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/ques.png"></image>
					</template>
				</view>
				<view class="flex">
					<view class="flex mr-20">
						<image class="wh-28 fs0" src="https://cdn.oss.bon-top.cn/static_bc/images/info.png"></image>
						<text class="ft ml-4">咨询</text>
					</view>
					<view class="flex" v-if="isConllect == 0" @click="conllectProduct">
						<image class="wh-28 fs0" src="https://cdn.oss.bon-top.cn/static_bc/images/collect.png"></image>
						<text class="ft ml-4">收藏</text>
					</view>
					<view class="flex" v-if="isConllect == 1" @click="cancelConllectProduct">
						<image class="wh-28 fs0" src="https://cdn.oss.bon-top.cn/static_bc/images/collect.png"></image>
						<text class="ft ml-4">已收藏</text>
					</view>
				</view>
			</view>
			<view class="two pd-20 flex-bwt">
				<view v-if="orderSettlementInfo.pay_price_show !== orderSettlementInfo.check_node_old_price_show">
					<view class="ft"><text class="ft c-33">优惠后</text>
						<text class="ft c-red">￥</text>
						<text class="ft-num c-red">
							{{ orderSettlementInfo.pay_price_show }}
						</text>
						<text class="ft c-red">元</text>
					</view>
					<view class="ft mt-8 c-99 ft-hen">{{ orderSettlementInfo.check_node_name }}<text
							class="ft-num c-99 ft-28">￥{{
								orderSettlementInfo.check_node_old_price_show }}</text>元
					</view>
				</view>
				<view v-else>
					<view class="ft"><text class="ft c-33">{{ orderSettlementInfo.check_node_name }}</text>
						<text class="ft c-red">￥</text>
						<text class="ft-num c-red">
							{{ orderSettlementInfo.pay_price_show }}
						</text>
						<text class="ft c-red">元</text>
					</view>
				</view>
				<view class="btn2 flex-center c-66" v-if="detailInfo.is_sellout === 1">已售馨</view>
				<view class="btn1 flex-center c-dbf" v-else @click="openTaoFun(detailInfo.id)">领券下订预览</view>
			</view>
		</view>
		<!-- 选择推荐项目按钮 -->


		<view class="btn_box" v-if="projectIshow">
			<view class="box flex-bwt" style="height: 98rpx;">
				<view class="btn_left ft-24 c-33">
					已选({{ projectIds.length }})
				</view>
				<view class="flex">
					<view class="btn mr-20" @click="reBack">返回</view>
					<view class="btn add" :class="projectIds.includes(detailInfo.id) ? 'domn_box_btnNoadd' : ''"
						@click="addProject(detailInfo)">{{ projectIds.includes(detailInfo.id) ? '取消' : "选为推荐" }}</view>
				</view>
			</view>

		</view>
	</view>
	<up-popup :show="show" mode="bottom" round="14" @open="open"
		:custom-style="{ bottom: keyboardHeight + 'px', 'border-radius': '40rpx 40rpx 0 0 !important' }">
		<view class="popup pd-40" style="background: #F8F8F8;border-radius: 40rpx 40rpx 0rpx 0rpx;overflow: hidden;">
			<image class="popup-close wh-36" @click="close"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1 ft-32">{{ "我要提问" }}</view>
			<view class="mt-20">
				<!-- <up-textarea v-model="questionContent" placeholderStyle="color:#999999; font-size:24rpx;border:none;"
					height="249rpx" placeholder="说出你的问题，白菜用户会为您解答..." :focus="isFocus" maxlength="50"
					style="background: #FFFFFF;border-radius: 40rpx;"></up-textarea> -->
				<textarea class="ft-24 c-33 bd-r40 pd-20" style="background: #fff;width: 100%;"
					v-model="questionContent" placeholder="说出你的问题，白菜用户会为您解答..." :adjust-position="false" maxlength="50"
					placeholder-class="textarea-placeholder" @keyboardheightchange="handleKeyboardHeightChange" />
			</view>
			<view class="flex-bwt mt-20">
				<view style="font-size: 24rpx;color: #999999;">{{ questionContent.length }}/50</view>
				<view class="flex-center"
					style="width: 128rpx;height: 58rpx;background: #333333;border-radius: 20rpx;font-size: 24rpx;color: #FFFFFF;"
					@click="subQ()">发布</view>
			</view>
		</view>
	</up-popup>

	<up-popup :show="showQuan" mode="bottom" round="14" @open="openQ"
		v-if="Object.keys(orderSettlementInfo).length > 0">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeQ"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">优惠券</view>
			<view class="ft c-red mt-12">
				{{
					"领券本单可减" + selectProJectitem?.coupon_reduce_info?.currency_symbol +
					selectProJectitem?.coupon_reduce_info?.total
				}}
			</view>
			<view class="hengxian mt-20"></view>
			<view class="mt-20 ft fw-800">{{ "可领取优惠券" }}</view>
			<view class="list mt-20" v-if="detailInfo.coupon_list && detailInfo.coupon_list.length > 0">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view class="quanItem flex mt-12" v-for="item in detailInfo.coupon_list" :key="item.id">
						<view class="arrow">
							<view class="tip ft ft-20 flex-center c-ff">{{ item.preferential_name }}</view>
							<view class="mt-20 flex-center">
								<view>
									<view class="ft-num ft-32">{{ item.currency_symbol }}{{ item.reduce }}</view>
									<view class="ft text_center">{{ item.type_name }}</view>
								</view>
							</view>
						</view>
						<view class="right flex-center">
							<view class="mr-46">
								<view class="ft fw-800" v-if="item.is_stackable === 1">部分商品可用（可叠加）</view>
								<view class="ft fw-800" v-else>部分商品可用（不可叠加）</view>
								<view class="ft c-99 mt-20">{{ item.start_time }}-{{ item.end_time }}</view>
							</view>
							<view class="flex-center ft btn" v-if="item.is_get === 0" @click="getQuan1(item.id)">
								领取
							</view>
							<view class="flex-center c-ff ft btnA" v-else> 已领取 </view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottomBtn flex-center">
				<view class="btn flex-center ft c-dbf" v-if="detailInfo.isCoupon" @click="getQuan">一键领取全部</view>
				<view class="btn default flex-center ft c-dbf" v-else @click="showQuan = false">已领取全部</view>
			</view>
		</view>
	</up-popup>

	<up-popup :show="showFuwu" mode="bottom" round="14" @open="openF"
		v-if="Object.keys(orderSettlementInfo).length > 0">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeF"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">服务</view>
			<view class="ft mt-12 c-99">{{ selectProJectitem.service_info.name }}，适用说明</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y-service" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="card_6 flex mt-20 pd-20">
					<view class="card">
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 服务</view>
							<view class="right pd-20 ft">{{ selectProJectitem.service_info.name }}</view>
						</view>
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 期限</view>
							<view class="right pd-20 ft">{{ selectProJectitem.service_info.term }}</view>
						</view>
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 条件</view>
							<view class="right pd-20 ft">{{ selectProJectitem.service_info.requirement }}
							</view>
						</view>

					</view>
				</view>
				<view class="card_7 mt-20 pd-20">
					<view class="ft1">其他</view>
					<view class="ft c-99 mt-10">{{ selectProJectitem.service_info.des }}</view>
				</view>
			</scroll-view>
			<view class="bottomBtn flex-center">
				<view class="btn c-dbf flex-center ft" @click="showFuwu = false">知道了</view>
			</view>
		</view>
	</up-popup>
	<up-popup :show="showPinf" mode="bottom" round="14" @open="openP"
		v-if="Object.keys(orderSettlementInfo).length > 0">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeP"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">白菜官方评分&获批率</view>
			<view class="flex card_8  mt-20">
				<view class="item">
					<view class="flex"> <text class="ft-num">{{ selectProJectitem.score }}分</text>
						<!-- <up-rate
							active-color="#333333" :value="selectProJectitem.score" readonly inactive-color="#D1D1D1"
							size="12" gutter="4"></up-rate> -->
						<comRate ref="comRate" v-if="selectProJectitem.score" :num="selectProJectitem.score"
							:noVal="true" disabled>
						</comRate>
					</view>
					<view class="ft mt-8">白菜移民评分</view>
				</view>
				<view class="item">
					<view class="ft-num">{{ selectProJectitem.w_rate }}</view>
					<view class="ft mt-8">白菜移民获批率</view>
				</view>
				<view class="item">
					<view class="ft-num">{{ selectProJectitem.o_rate }}</view>
					<view class="ft mt-8">官方获批率</view>
				</view>
			</view>
			<view class="card_9  flex mt-20 pd-20">
				<view class="s_card">
					<view class="flex" style="align-items: stretch;">
						<view class="left ft c-99" style="border-radius: 20rpx 0rpx 0rpx 0rpx;"> 项目</view>
						<view class="right pd-20 ft">{{ selectProJectitem.name }}</view>
					</view>
					<view class="flex" style="align-items: stretch;">
						<view class="left ft c-99"> 品牌</view>
						<view class="right pd-20 ft">{{ selectProJectitem.brand_info.name }}</view>
					</view>
					<view class="flex" style="align-items: stretch;">
						<view class="left ft c-99"> 获批率</view>
						<view class="right pd-20 ft"> 白菜移民获批率 {{ selectProJectitem.w_rate }}
							（{{ selectProJectitem.w_rate_from }}）</view>
					</view>
					<view class="flex" style="align-items: stretch;">
						<view class="left ft c-99"> </view>
						<view class="right pd-20 ft">官方获批率 {{ selectProJectitem.o_rate }}
							（{{ selectProJectitem.o_rate_from }}）</view>
					</view>
					<view class="flex" style="align-items: stretch;">
						<view class="left ft c-99" style="border-radius: 0rpx 0rpx 0rpx 20rpx;">地区</view>
						<view class="right pd-20 ft">{{ detailInfo.country_info.name }}</view>
					</view>
				</view>
			</view>
			<view class="card_10 mt-20 pd-20">
				<view class="ft1">评分说明</view>
				<view class="ft c-99 mt-10">{{ selectProJectitem.score_des }}</view>
			</view>
			<view class="card_10 mt-20 pd-20">
				<view class="ft1">获批率说明</view>
				<view class="ft c-99 mt-10">{{ selectProJectitem.rate_des }}</view>
			</view>
			<view class="bottomBtn flex-center">
				<view class="btn c-dbf flex-center ft">知道了</view>
			</view>
		</view>
	</up-popup>
	<!-- 阅读弹窗 -->
	<up-popup :show="showYue" mode="bottom" round="14" @open="openY" v-if="Object.keys(orderSettlementInfo).length > 0">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeY"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">分享阅读奖励说明</view>
			<view class="ft mt-20">{{ detailInfo.activity_info?.other_des }}</view>
			<view class="bottomBtn flex-center" @click="showYue = false">
				<view class="btn c-dbf flex-center ft">知道了</view>
			</view>
		</view>

	</up-popup>
	<up-popup :show="showTao" mode="bottom" round="14" @close="closeT" @open="openT"
		v-if="Object.keys(orderSettlementInfo).length > 0">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeT"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="flex">
				<view class="btn flex-center" @click="showOffers = true">
					<view class="ft mr-8">汇算明细</view>
					<image class="wh-32" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
				<view class="ft ml-24 c-99">支付项目服务费，即可下订单。</view>
			</view>
			<scroll-view scroll-left="0" @scroll="scroll" scroll-y="true" class="scroll-Y-price">
				<view class="flex-bwt1 flex-start mt-20">
					<view class="img mr-20">
						<image class="wh-100" style="border-radius: 20rpx;" mode="aspectFill"
							:src="selectProJectitem.cover"></image>
					</view>
					<view class="jiaq">
						<view class="price auto ft flex fw-800 mt-20">{{ selectProJectitem.show_currency_symbol }}<text
								class="ft-num fw-800">{{
									selectProJectitem.bc_price_show }}</text><text class="ft fw-800">/{{
									selectProJectitem.price_label }}</text>
						</view>
						<view class="ft c-99 mt-20 flex delft"
							v-if="selectProJectitem?.old_price || selectProJectitem?.peer_price_show">
							<text v-if="selectProJectitem?.old_price">{{ selectProJectitem.show_currency_symbol }}<text
									class="ft-num ft-24 c-99">{{ selectProJectitem?.old_price }}</text>/白菜价</text>
							<text class="line"
								style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 10rpx;margin-right: 10rpx;"
								v-if="selectProJectitem?.old_price && selectProJectitem?.peer_price_show"></text> <text
								v-if="selectProJectitem?.peer_price_show">{{ selectProJectitem.show_currency_symbol }}
								<text class="ft-num ft-24 c-99">{{ selectProJectitem?.peer_price_show
								}}</text>/同行价</text>
						</view>
					</view>
				</view>
				<view class="mt-20 card_3 pd-20">
					<view class="flex-bwt">
						<view>
							<text class="ft c-99 mr-24">服务费</text><text class="ft-num ft-24">{{ "￥" +
								orderSettlementInfo.price_exchange_show }}</text>
						</view>
						<view class="flex" v-if="orderSettlementInfo.coupon_price_exchange_show">
							<view class="quan c-ff ft mr-8">券</view><text class="ft-num ft-24 c-red">-￥{{
								orderSettlementInfo.coupon_price_exchange_show }}</text>
						</view>
					</view>
					<view class="flex-bwt mt-12" v-if="orderSettlementInfo.other_price_exchange_show">
						<view>
							<text class="ft c-99 mr-24">其他费用</text><text class="ft-num ft-24">{{ "￥" +
								orderSettlementInfo.other_price_exchange_show }}</text>
						</view>
						<view class="flex" v-if="orderSettlementInfo.coupon_other_price_exchange_show">
							<view class="quan c-ff ft mr-8">券</view><text class="ft-num ft-24 c-red">-￥{{
								orderSettlementInfo.coupon_other_price_exchange_show }}</text>
						</view>
					</view>
					<view class="flex-bwt mt-12" v-if="orderSettlementInfo.additional_price_exchange_show">
						<view>
							<text class="ft c-99 mr-24">附加服务</text><text class="ft-num ft-24">{{ "￥" +
								orderSettlementInfo.additional_price_exchange_show }}</text>
						</view>
					</view>
					<view class="flex-bwt mt-12">
						<view>
							<text class="ft c-99 mr-24">花费合计</text><text class="ft-num ft-24">{{ "￥" +
								orderSettlementInfo.total_price_exchange_show }}</text>
						</view>

					</view>
				</view>
				<view class="ft1 mt-24"> 项目选择</view>
				<view class="mt-12 proList">
					<scroll-view scroll-left="0" @scroll="scroll" scroll-x="true" class="scroll-x">
						<view :class="{ active: selectProJectitem.id == item.id }" class="project mr-20"
							v-for="(item, index) in detailInfo.spec_data" :key="index"
							@click="selctProJect(index, item.id, item)">
							<view class="flex">
								<view class="img">
									<image style="border-radius: 20rpx;" class="wh-100" mode="aspectFill"
										:src="item.cover">
									</image>
								</view>
								<view class="ml-10">
									<view class="ft ft-20 txt">{{ item.name }}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="detailInfo.additionals.length > 0">
					<text class="ft1 mt-24 mr-12">附加服务选择（{{ sevS.length }}）</text>
					<text class="ft c-99">可以多选</text>
				</view>
				<view class="services mt-12">
					<view class="sevice flex-bwt mt-20" :class="{ active: sevS.includes(item.id) }"
						v-for="(item, index) in detailInfo.additionals" :key="index" @click="selectSve(item.id)">
						<view> <text class="ft txt">{{ item.name }}</text> <text class="ft ml-40">{{
							item.currency_symbol
						}}{{
									item.price }} {{ item.currency_name }}</text>
						</view>
						<view class="catch ml-20 ft flex-center" @click.stop="goAdditional(item.id)">查看</view>
					</view>
				</view>
			</scroll-view>

		</view>
		<view class="payCard shadow">
			<view class="two pd-20 flex-bwt">
				<view>
					<view class="ft"><text class="ft c-33">优惠后</text><text class="ft c-red">￥</text><text
							class="ft-num c-red">{{
								orderSettlementInfo.pay_price_show }}</text><text class="ft c-red">元</text></view>
					<view class="ft mt-8 c-99 ft-hen">{{
						orderSettlementInfo.check_node_name }}<text class="ft-num c-99 ft-28">￥{{
							orderSettlementInfo.check_node_old_price_show }}</text>元
					</view>
				</view>
				<view class="btn1 flex-center c-dbf" @click="goReview">立即下订预览</view>
			</view>
		</view>
	</up-popup>
	<up-popup :show="showOffers" mode="bottom" round="14" @open="openO"
		v-if="Object.keys(orderSettlementInfo).length > 0">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeO"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">汇算明细</view>
			<view class="ft c-99 mt-10 ft-lue" style="width:670rpx;">{{
				orderSettlementInfo.today_currency_str
			}}</view>
			<view class="mt-20 flex">
				<view class="popuItem ft flex-center mr-20" v-for="(item, index) in checkList" :key="item.id"
					:class="{ active: tabSec === item.id }" @click="selctCheck(item.id)">
					{{ item.title }}
				</view>
			</view>

			<view class="content mt-20">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" v-if="tabSec === 1">
					<view class="neiriong pd-20">
						<view class="ft1">{{ "服务费" }}</view>
						<view class="cardItem mt-20 pd-20"
							v-for="(item, index) in orderSettlementInfo.price_detail_list" :key="index">
							<view class="flex-bwt" :class="{ border: item.isOpen == 1 }">
								<view class="ft fw-800 c-33">{{ item.name }}</view>
								<view class="flex" v-if="item.is_coupon === 0"><text class="ft-num mr-8 ft-24">{{
									item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
								<view class="flex" v-else><text class="ft icon_quan c-ff">券</text>
									<text class="ft-num c-red mr-8 ft-24">{{ item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
							</view>
							<view class="ft mt-24 c-99" v-if="item.isOpen == 1">{{ item.txt }}</view>
						</view>
						<view class="ft1 mt-20">{{ "其他费用" }}</view>
						<view class="cardItem mt-20 pd-20"
							v-for="(item, index) in orderSettlementInfo.other_price_detail_list" :key="index">
							<view class="flex-bwt" :class="{ border: item.isOpen == 1 }">
								<view class="ft fw-800 c-33">{{ item.name }}</view>
								<view class="flex" v-if="item.is_coupon === 0"><text class="ft-num mr-8 ft-24">{{
									item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
								<view class="flex" v-else><text class="ft icon_quan c-ff">券</text>
									<text class="ft-num c-red mr-8 ft-24">{{ item.formula }}</text>
									<image class="wh-24" :class="{ down: item.isOpen != 1 }"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
										@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
									</image>
								</view>
							</view>
							<view class="ft mt-24 c-99" v-if="item.isOpen == 1">{{ item.txt }}</view>
						</view>
						<view class=" mt-20" v-if="orderSettlementInfo.additional_price_detail_list.length > 0">
							<view class="ft1">{{ "附加服务费" }}</view>
							<view class="cardItem mt-20 pd-20"
								v-for="(item, index) in orderSettlementInfo.additional_price_detail_list" :key="index">
								<view class="flex-bwt" :class="{ border: item.isOpen == 1 }">
									<view class="ft fw-800 c-33">{{ item.name }}</view>
									<view class="flex"><text class="ft-num mr-8 ft-24">{{ item.formula }}</text>
										<image class="wh-24" :class="{ down: item.isOpen != 1 }"
											src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"
											@click="item.isOpen = item.isOpen == 1 ? 0 : 1">
										</image>
									</view>
								</view>
								<view class="ft mt-20 c-99" v-if="item.isOpen == 1">{{ item.txt }}</view>
							</view>
						</view>
						<view class="price flex mt-20">
							<view>
								<text class="ft c-red">{{ "共减￥" }}</text><text class="ft-num ft-24 c-red">{{
									orderSettlementInfo.total_reduce_price_exchange_show
								}}</text><text class="ft c-red mr-12">{{ "元" }}</text>
								<text class="ft">{{ "合计￥" }}</text><text class="ft-num">{{
									orderSettlementInfo.total_price_exchange_show }}</text>
								<text class="ft">{{ "元" }}</text>
							</view>

							<view class="ft ft-hen">
								<text class="ft c-99">{{ "原价" }}</text><text class="ft-num ft-24 c-99">{{
									orderSettlementInfo.total_old_price_exchange_show }}</text><text class="ft c-99">{{
										"元"
									}}</text>
							</view>
						</view>
						<view class="jieshi pd-20 c-99 ft mt-20">

							温馨提示：<br />
							1、支付项目服务费，即可下订单。<br />
							2、其它费用以及项目投资费在办理过程中陆续支付，支持线上或线下支付，非微信支付提供支付凭证后，客服人员进行后台核销。<br />
							3、活动立减需领优惠券后生效，有使用时间限制。<br />
							4、领券下订单后，待支付的费用优惠将持继有效。<br />

						</view>
					</view>
				</scroll-view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" v-if="tabSec === 2">
					<view class="neiriong">
						<view class="pCard pd-20">
							<view class="ft1">投资费用</view>
							<view class="ft mt-12">{{
								"投资费由移民所在国政府或第三方收取，投资人相关权益由被投资方双方签署的协议约束。"
							}}</view>
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 投资类型 </view>
									<view class="right ft fw-800 pd-20"> {{ orderSettlementInfo.invest_type }} </view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 投资标的 </view>
									<view class="right ft fw-800 pd-20"> {{ orderSettlementInfo.invest_bid }} </view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 投资金额 </view>
									<view class="right ft fw-800 pd-20">
										{{ orderSettlementInfo.invest_currency_symbol
											+ orderSettlementInfo.invest_exchange_price_show }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 换算人民币 </view>
									<view class="right ft fw-800 pd-20">
										{{ orderSettlementInfo.invest_currency_symbol
											+ orderSettlementInfo.invest_exchange_price_show }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20" style="padding-right: 0;"> 投资是否可回收 </view>
									<view class="right ft fw-800 pd-20">{{ orderSettlementInfo.invest_recycle }} </view>
								</view>
							</view>
						</view>
						<view class="pCard pd-20">
							<view class="ft1">预计投资收益</view>
							<!-- <view class="ft mt-12">{{
	                "投资费由移民所在国政府或第三方收取，投资人相关权益由被投资方双方签署的协议约束。"
	              }}</view> -->
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 持有时间 </view>
									<view class="right ft fw-800 pd-20"> {{ orderSettlementInfo.income_time }} </view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 可得总回报约 </view>
									<view class="right ft fw-800 pd-20">
										{{ orderSettlementInfo.income_rate }}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 预计收益</view>
									<view class="right ft fw-800 pd-20">
										{{
											orderSettlementInfo.income_currency_symbol +
											orderSettlementInfo.income_expect_show
										}}
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99 pd-20"> 换算人民币 </view>
									<view class="right ft fw-800 pd-20">
										{{
											orderSettlementInfo.income_currency_symbol +
											orderSettlementInfo.income_expect_show
										}}
									</view>
								</view>
								<view class="flex line" style="align-items: stretch;height: unset;">
									<view class="left ft c-99 pd-20" style="height: auto;">备注</view>
									<view class="right ft fw-800 pd-20" style="height: unset;border-bottom: none;">
										{{ orderSettlementInfo.income_remark }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" v-if="tabSec === 3">
					<view class="neiriong">
						<view class="pCard pd-20">
							<view class="ft1">预计汇总</view>
							<view class="ft c-99 mt-12">{{
								"该项目用户预计需要承担的费用汇总"
							}}</view>
							<view style="width: 100%; text-align: right" class="ft c-99 mt-12">{{ "单位(人民币)" }}</view>
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 服务费 </view>
									<view class="right ft flex-bwt pd-20" style="box-sizing: border-box;">
										<text class="ft fw-800">{{ orderSettlementInfo.price_symbol
											+ orderSettlementInfo.price_show }}</text>
										<text v-if="orderSettlementInfo.coupon_price_exchange_show">
											<text style="
	                          width: 32rpx;
	                          height: 32rpx;
	                          background: #ff0000;
	                          border-radius: 8rpx;
							  display: inline-block;
							  text-align: center;
	                        " class="quan c-ff mr-8">券</text>
											<text class="ft c-red">{{
												"-￥" + orderSettlementInfo.coupon_price_exchange_show
											}}</text></text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 办理其它费用 </view>
									<view class="right ft flex-bwt pd-20" style="box-sizing: border-box;">
										<text class="ft fw-800" v-if="orderSettlementInfo.other_price_exchange_show">{{
											orderSettlementInfo.price_symbol
											+ orderSettlementInfo.other_price_exchange_show }}</text>
										<text v-if="orderSettlementInfo.coupon_other_price_exchange_show">
											<text style="
	                          background: #ff0000;
	                          width: 32rpx;
	                          height: 32rpx;
	                          border-radius: 8rpx;
							  display: inline-block;
							  text-align: center;
	                        " class="quan c-ff mr-8">券</text>
											<text class="ft c-red">{{
												"-￥" + orderSettlementInfo.coupon_other_price_exchange_show
											}}</text></text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 附加服务费 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800"
											v-if="orderSettlementInfo.additional_price_exchange_show">{{
												"￥" + orderSettlementInfo.additional_price_exchange_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 投资费用 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800" v-if="orderSettlementInfo.invest_exchange_price_show">{{
											"￥" + orderSettlementInfo.invest_exchange_price_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 合计 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800" v-if="orderSettlementInfo.total_invest_price_show">
											{{ "￥" + orderSettlementInfo.total_invest_price_show }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="pCard pd-20">
							<view class="ft1">预计可回收收益汇总</view>
							<view class="ft c-99 mt-12">{{
								"该项目用户预计办理后可回收的收益"
							}}</view>
							<view style="width: 100%; text-align: right" class="ft c-99 mt-12">{{ "单位(人民币)" }}</view>
							<view class="samllCard mt-12">
								<view class="flex line">
									<view class="left ft c-99  pd-20" style="padding-right: 0;"> 可回收投资费用 </view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800" v-if="orderSettlementInfo.recycle_exchange_price_show">
											{{ "￥" + orderSettlementInfo.recycle_exchange_price_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20"> 预计投资收益 </view>
									<view class="right ft flex-bwt pd-20"><text class="ft fw-800"
											v-if="orderSettlementInfo.income_exchange_price_show">
											{{ "￥" + orderSettlementInfo.income_exchange_price_show }}</text>
									</view>
								</view>
								<view class="flex line">
									<view class="left ft c-99  pd-20">合计</view>
									<view class="right ft flex-bwt pd-20">
										<text class="ft fw-800" v-if="orderSettlementInfo.total_recycle_price_show">{{
											"￥" + orderSettlementInfo.total_recycle_price_show + "人民币"
										}}</text>
									</view>
								</view>

							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="bottomBtn flex-center">
			<view class="btn flex-center ft c-dbf" @click="closeO">确定</view>
		</view>
	</up-popup>
	<!-- 合同查看确认弹窗 -->
	<view class="delete_box" ref="diaLogPop" v-if="showContract">
		<view class="bg"></view>
		<view class="delete_model bd-r40">
			<view class="ft-32 c-33 fw-800 mt-30">{{ '提示' }}</view>
			<view class="c-99 ft-28 text pd-30">
				<view>是否查看文档</view>
				<view style="color: #1F18EE;"> 《{{ dataContract.origin_name }}》</view>
				<view>合同大小：{{ dataContract.size_info }} </view>

			</view>
			<view class="btn_model flex-eve">
				<view class="btns" @click="showContract = false">{{ '取消' }}</view>
				<view class="btns sunbmit" @click="seeOffice()">{{ '查看' }}</view>
			</view>
		</view>
	</view>
</template>
<script lang="js" setup>
import {
	onLoad,
	onReady,
	onReachBottom,
	onShareAppMessage,
	onShareTimeline,
	onPageScroll,
	onUnload
} from '@dcloudio/uni-app'
import {
	ref,
	onMounted,
	onUnmounted,
	reactive
} from 'vue';
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import qiunDataCharts from '@qiun/ucharts'
import commentCard from '@/components/commentCard.vue'
import avtorGroup from '@/components/avtorGroup.vue';
import thrumb from '@/components/thrumb.vue';
import ComProjectList from "@/components/comProjectList.vue";
import comHead from '@/components/comHead.vue'
import comRate from '@/components/comRate.vue'
import comTimeOut from '@/components/comTimeOut.vue'

const isShow = ref(true)
const het = ref('44rpx')
const openL = () => {
	isShow.value = false;
	het.value = '88rpx'
}
const closeL = () => {
	isShow.value = true;
	het.value = '44rpx'
}
const goPage = (url) => {
	uni.navigateTo({ url: url })
}
const openImg = (index, imgList = []) => {
	uni.previewImage({
		current: index,
		urls: imgList
	});
}
let datasObj = reactive({
	title: '产品详情',
	isColor: false,
	color: '',
	scrollTop: 0,
	direction: '',
	backisImg: true,
})
let app = getApp()
const selectImage = ref('')
const projectIds = ref([])
const projectIshow = ref(false)
projectIshow.value = app.globalData.isTeacherAdd
projectIds.value = app.globalData.projectIds

const addProject = (item) => {
	console.log('item', item)
	let arr = app.globalData.projectIds
	console.log(arr.indexOf(item.id))
	if (arr.indexOf(item.id) !== -1) { //数据已经存在 删除
		arr = arr.filter((f, i) => f !== item.id)
		app.globalData.projectItem = app.globalData.projectItem.filter((f, i) => f.id !== item.id)

	}

	else {
		// 多选
		if (app.globalData.multiple) {
			arr.push(item.id)

		} else {//单选
			if (app.globalData.projectIds.length > 0) return uni.showToast({ title: '最多选择一个项目', icon: 'none' })
			arr = [item.id]
		}

		app.globalData.projectItem.push(item)
	}
	app.globalData.projectIds = [...new Set(arr)]
	projectIds.value = app.globalData.projectIds
	console.log('projectIds.value', projectIds.value)
}
const reBack = () => {
	uni.navigateBack(-1)
}
const keyboardHeight = ref(0)
const handleKeyboardHeightChange = (e) => {
	// #ifdef MP-WEIXIN
	keyboardHeight.value = e.detail.height
	if (uni.getSystemInfoSync().platform === 'ios') {
		uni.pageScrollTo({
			scrollTop: 100000, // 滚动到底部
			duration: 0
		})
		keyboardHeight.value = Math.max(e.detail.height - safeAreaBottom.value, 0)
	}
	// #endif

}
const isHeadActive = ref(false)
onPageScroll((e) => {
	console.log('kkkkk')
	const scrollTop = e.scrollTop; // 获取滚动距离
	// console.log('滚动距离', e.detail)	  
	// 优化监听事件 防止毫秒级触发
	datasObj.direction = (scrollTop > datasObj.scrollTop) ? 'down' : 'up'
	if (scrollTop > 10 && datasObj.direction == 'down' && datasObj.backisImg) {
		datasObj.color = '#FFFFFF'
		datasObj.backisImg = false
		datasObj.scrollTop = scrollTop
		// console.log('我是向下滑动')
		isHeadActive.value = true
	} else if (scrollTop < 5 && datasObj.direction == 'up' && !datasObj.backisImg) {
		datasObj.color = '#DBF046'
		datasObj.backisImg = true
		datasObj.scrollTop = scrollTop
		// console.log('我是向上滑动^^^')
		isHeadActive.value = false
	}
})

const showOffers = ref(false);
const showQuan = ref(false);
const showTao = ref(false);
const showFuwu = ref(false);
const showYue = ref(false);
const showPinf = ref(false);
//是否获取焦点
const isFocus = ref(false)
//是否收藏
const isConllect = ref(0)
const conllectProduct = () => {
	utils
		.request(
			api.collect, {
			product_id: detailInfo.value.id,
		},
			"post"
		)
		.then((res) => {
			if (res.code == 200) {
				isConllect.value = 1
				detailInfo.value.conllect_list.unshift({
					avatar: uni.getStorageSync("userInfo").avatar,
					nickname_show: uni.getStorageSync("userInfo").nickname.substr(0, 4) + '***刚刚收藏了'
				})
			}
		});
}
const cancelConllectProduct = () => {
	utils
		.request(
			api.cancelCollect, {
			product_id: detailInfo.value.id,
		},
			"post"
		)
		.then((res) => {
			if (res.code == 200) {
				isConllect.value = 0
			}
		});
}

const seeFUwu = () => {
	showFuwu = true
}

const handleProplem = () => {
	if (!utils.isLogin()) return utils.showLogModel()
	show.value = true;
	isFocus.value = true;


}

// 返回键
const goBack = () => {
	let pages = getCurrentPages();
	if (pages.length > 1) {
		uni.navigateBack(-1)
	} else {
		wx.reLaunch({
			url: '/pages/index/index',
		})
	}
}

//直播跳转
const goLive = () => {

	uni.navigateToMiniProgram({
		appId: "wx13a74d0d3ab0942e", //'小鹅通小程序的 appId',
		path: detailInfo.value.live_info.page_url,
		extraData: {
			// 可传递的额外参数
		},
		success(res) {
			// 跳转成功的回调函数
			console.log('跳转成功', res);
		},
		fail(err) {
			// 跳转失败的回调函数
			console.log('跳转失败', err);
		}
	})
}
//orderSettlement 获取汇算内容
const orderSettlementInfo = ref({})
const orderSettlementData = () => {
	utils
		.request(
			api.orderSettlement, {
			spec_id: selectProJectitem.value.id,
			additional_id: sevS.value,
			group_id: group_id.value,
			is_preview: 1,//预览价格，用于未领取优惠券时提前估价
		},
			"post"
		)
		.then((res) => {
			orderSettlementInfo.value = res.data.info;
		});
}

//领取优惠券
const getQuan = () => {
	utils
		.request(
			api.receiveCoupon, {
			is_all: 1,
			product_id: detailInfo.value.id,

		},
			"post"
		)
		.then((res) => {
			if (res.code === 200) {
				getProductDetailData(detailInfo.value.id);
				utils.toast('优惠券全部领取成功');
				setTimeout(() => {
					showQuan.value = false
				}, 1200)
			}
			closeO()
		});
}

const getQuan1 = (id) => {
	utils
		.request(
			api.receiveCoupon, {
			product_id: detailInfo.value.id,
			ids: [id]
		},
			"post"
		)
		.then((res) => {
			if (res.code === 200) {
				utils.toast('领取成功');
				getProductDetailData(product_id.value);
			}

		});
}


const goTeaDetail = (id) => {
	uni.navigateTo({
		url: `/subpackage/teacher/teacherDetail?id=${id}`,
	})
}

//是否静音播放
const isMuted = ref(true)
const closeP = () => {
	showPinf.value = false
}
const openP = () => {
	showPinf.value = true;
}
const isPlayShow = ref(false);
const playVideoUrl = ref('')
const playVideoed = (item) => {
	playVideoUrl.value = item.url;
	console.log(playVideoUrl.value, "视频列表");

	isPlayShow.value = true;
}

//
const showContract = ref(false)
const dataContract = ref({})
const openContract = (data) => {
	dataContract.value = data
	showContract.value = !showContract.value
}
const seeOffice = async () => {
	showContract.value = !showContract.value
	//打开确认弹窗
	try {
		// 下载文件
		const {
			tempFilePath,
			statusCode
		} = await uni.downloadFile({
			url: dataContract.value.url,
		});

		// 检查下载状态码
		if (statusCode === 200) {
			// 打开下载好的文件
			await uni.openDocument({
				filePath: tempFilePath,
				fileType: dataContract.value.suffix, // 根据实际文件类型修改
			});
		} else {
			// 下载失败，给出提示
			uni.showToast({
				title: '文件下载失败',
				icon: 'none',
			});
		}
	} catch (error) {
		// 处理异常，给出提示
		console.log('error', error)
		uni.showToast({
			title: '预览文件出错：' + error.errMsg,
			icon: 'none',
		});
	}
};


const goMorePro = () => {
	uni.reLaunch({
		url: `/pages/cart/cart`
	})
}

const goProjectDetail = (id) => {
	uni.navigateTo({
		url: `/subpackage/immigration/immigration?id=${id}`,
	});
};

const productList = ref([]);
let dataListObj = reactive({})
const getProductListData = () => {
	utils
		.request(
			api.getProductList, {
			page: 1,
			pageSize: 5,
			isRecommend: 1,
		},
			"post"
		)
		.then((res) => {
			dataListObj = res.data
			productList.value = res.data.items;
		});
};

const goTags = (id) => {
	uni.navigateTo({
		url: `/subpackage/clinch/tipSearch?tigId=${id}`,
	});
}

const goBuyVip = () => {
	uni.navigateTo({
		url: "/subpackage/openVip/openVip",
	});
}

const closeY = () => {
	showYue.value = false
}
const openY = () => {
	showYue.value = true;
}

const closeF = () => {
	showFuwu.value = false
}
const openF = () => {
	showFuwu.value = true;
}

const closeO = () => {
	// if (detailInfo.value.coupon_list.length === 0) {
	// 	utils.toast('无可用优惠券可领取')
	// } else {
	// 	getQuan()
	// }
	showOffers.value = false
}
const openO = () => {
	showOffers.value = true;
}
const selectProJectitem = ref({})
const proSelt = ref(0)
const selctProJect = (idx, id, item) => {
	proSelt.value = idx;
	selectProJectitem.value = item;
	console.log('selectProJectitem.value', selectProJectitem.value)
	orderSettlementData();
}


const sevS = ref([])
const selectSve = (idx) => {
	// sevS.value = idx
	if (sevS.value.includes(idx)) {
		sevS.value = sevS.value.filter((item) => {
			return item != idx
		})
	} else {
		sevS.value.push(idx)
	}
	orderSettlementData();
}

const goPaihang = () => {
	uni.navigateTo({
		url: '/subpackage/immigration/rankings'
	})
}

const goBijia = (id) => {
	uni.navigateTo({
		url: `/subpackage/immigration/industry`,
		// events: {
		// 	// 监听子页面事件
		// 	fromDetail: (data) => {
		// 		trade_no.value = data.trade_no
		// 	}
		// },
		success: (res) => {
			// 向子页面传递数据
			res.eventChannel.emit('getDetail', {
				detailInfo: selectProJectitem.value
			});
		}
	})
}
// 打开项目选择弹窗
const openTaoFun = () => {
	if (selectProJectitem.value.coupon_reduce_list?.length > 0) getQuan()
	setTimeout(() => {

		showTao.value = !showTao.value
	}, 1000)

}
// 下订预览
const goReview = () => {
	temVal.value = ['MVvQJRMgOYiit-qTYZ-Hbj2r-63wpLX8gaIQOlV6_IA', 'xENaH_EvcvM1mFr1mhWRkXd6GrwGFqGUcpEqcaQF90c']
	getSettingFun(temVal.value)
	uni.navigateTo({
		url: '/subpackage/joinGroup/orderPreview?spec_id=' + selectProJectitem.value.id +
			'&additional_id=' + sevS.value.join(',') + '&group_id=' + group_id.value
	})
}

const goAdditional = (id) => {
	uni.navigateTo({
		url: `/subpackage/immigration/immigration?id=${id}`
	})
}


const closeQ = () => {
	showQuan.value = false
}
const openQ = () => {
	showQuan.value = true;
}
const closeT = () => {
	showTao.value = false
}
const openT = () => {
	showTao.value = true;
}
const scrollTop = ref(0)
const upper = () => {

}
const lower = () => {

}

const scroll = () => {

}
const tabSec = ref(1)
const selctCheck = (id) => {
	tabSec.value = id
}


const currentTab = ref(1)
const imgAc = ref(0)
const tabItems = ref([{
	id: 1,
	desc: '详情'
}, {
	id: 2,
	desc: '评价(0)'
}, {
	id: 3,
	desc: '问答(0)'
}, {
	id: 4,
	desc: '适用人群&案例'
},])

const switchTab = (id) => {
	currentTab.value = id
	if (id == 3) {
		temVal.value = ['SRHUcdYkXWzI7j4FLC5_CeZklF8TKqqyZk-m6ytA8xc']
		getSettingFun(temVal.value)

	}
}

const checkList = ref(
	[{
		id: 1,
		title: '办理花费'
	},
	{
		id: 2,
		title: '投资费用'
	},
	{
		id: 3,
		title: '预计汇总'
	}
	]
)

const chartData = ref({})



const opts = ref({
	color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
	padding: [5, 5, 5, 5],
	dataLabel: false,
	enableScroll: false,
	legend: {
		show: true,
		position: "right",
		lineHeight: 25
	},
	extra: {
		radar: {
			gridType: "radar",
			gridColor: "#CCCCCC",
			gridCount: 3,
			opacity: 0.2,
			max: 200,
			labelShow: true,
			border: true
		}
	}
}

)




const getServerData = () => {
	//模拟从服务器获取数据时的延时
	setTimeout(() => {
		//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		let res = {
			categories: ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
			series: [{
				name: "成交量1",
				data: [90, 110, 165, 195, 187, 172]
			},
			{
				name: "成交量2",
				data: [190, 210, 105, 35, 27, 102]
			}
			]
		};
		chartData.value = JSON.parse(JSON.stringify(res));
	}, 500);
}
const selectData = ref({})
onReady(() => {
	getServerData()
	const systemInfo = uni.getSystemInfoSync()
	// let statusBarHeight = systemInfo.statusBarHeight
	let screenWidth = systemInfo.screenWidth
	let menuButtonInfo = 0
	// #ifdef MP
	menuButtonInfo = wx.getMenuButtonBoundingClientRect();
	// #endif
	selectData.value = {
		menuButtonRight: (screenWidth - menuButtonInfo.right) + menuButtonInfo.width,

	}
	console.log('selectData.value', selectData.value)
})

const goDetail1 = (id) => {
	uni.navigateTo({
		url: `/subpackage/clinch/clinchDetail?id=${id}`,
	});
};
const questionContent = ref("")
// 创建响应式数据
const show = ref(false);
const openPopup = () => {
	show.value = true;
	//     uni.showKeyboard({
	//   success: function() {
	//     console.log('Keyboard is shown');
	//   },
	//   fail: function(err) {
	//     console.error('Failed to show keyboard: ', err);
	//   }
	// });
}
// 定义方法
function open() {
	// 打开逻辑，比如设置 show 为 true
	show.value = true;
	// console.log('open');
}

function close() {
	// 关闭逻辑，设置 show 为 false
	show.value = false;
	// console.log('close');
}

const selctImage = ref('')
const selectImg = (index, item) => {
	imgAc.value = index;
	selctImage.value = item;
	isPlayShow.value = false;
}
const goVedio = (id) => {
	uni.navigateTo({
		url: `/subpackage/immigration/vedioAndPicture?id=${id}`
	})
}
const detailInfo = ref({})
const selectProJectStr = ref({})

const getProductDetailData = (id) => {
	utils
		.request(
			api.getProductDetail, {
			id: id,
		},
			"get"
		)
		.then((res) => {
			detailInfo.value = res.data.info

			shareConfig.value.title = res.data.info.name
			shareConfig.value.imageUrl = res.data.info.cover

			isConllect.value = res.data.info.is_conllect

			if (detailInfo.value.images && detailInfo.value.images.length > 0) {
				selctImage.value = detailInfo.value.images[0]
			}
			// selectProJectitem.value = detailInfo.value.spec_data[0]
			selectProJectitem.value = detailInfo.value.check_spec_data
			detailInfo.value.isCoupon = detailInfo.value?.coupon_list.some(f => !f.is_get)
			let str = selectProJectitem.value?.brand_info.des
			selectProJectStr.value = str.length > 100 ? (str.slice(0, 100) + '...') : str

			orderSettlementData()
			getProductEvaluateData()
			getProductQAData()
			getProductCaseData()
		});
}

//评价信息
const tabList = ref([])
const evaluateInfo = ref({})
const evaluatePage = ref(1)
const evaluateList = ref([])
const evaluateLoading = ref(true)
const getProductEvaluateData = () => {
	if (!evaluateLoading.value) {
		return
	}
	evaluateLoading.value = false

	utils
		.request(
			api.getEvaluateList, {
			product_id: detailInfo.value.id,
			tag_id: selctTab.value,
			page: evaluatePage.value,
			pageSize: 5,
		},
			"get"
		)
		.then((res) => {
			if (tabList.value.length == 0) {
				evaluateInfo.value = res.data
				tabItems.value[1].desc = "评价(" + res.data.pageInfo.total + ")"

				tabList.value.push({
					id: '',
					des: '全部',
					num: res.data.pageInfo.total
				})
				res.data.tag_list.map((item) => {
					tabList.value.push({
						id: item.id,
						des: item.name,
						num: item.num
					})
				})
			}
			evaluatePage.value++
			if (res.data.items.length > 0) {
				evaluateList.value = evaluateList.value.concat(res.data.items)
				evaluateLoading.value = true
			}
		});
}

const refreshEvaluateInfo = (index) => {
	utils
		.request(
			api.getEvaluateDetail, {
			id: evaluateList.value[index].id,
		},
			"post"
		)
		.then((res) => {
			evaluateList.value[index].is_like = res.data.info.is_like
			evaluateList.value[index].like_num = res.data.info.like_num
			evaluateList.value[index].reply_count = res.data.info.reply_count
		});
}

const casePage = ref(1)
const caseList = ref([])
const caseLoading = ref(true)
const getProductCaseData = () => {
	if (!caseLoading.value) {
		return
	}
	caseLoading.value = false

	utils
		.request(
			api.getDealCaseList, {
			product_id: detailInfo.value.id,
			page: casePage.value,
			pageSize: 5,
		},
			"get"
		)
		.then((res) => {
			casePage.value++
			if (res.data.items.length > 0) {
				caseList.value = caseList.value.concat(res.data.items)
				caseLoading.value = true
			}
		});
}

const qaInfo = ref({})
const qaPage = ref(1)
const qaList = ref([])
const qaLoading = ref(true)
const getProductQAData = () => {
	if (!qaLoading.value) {
		return
	}
	qaLoading.value = false

	utils
		.request(
			api.getQAList, {
			product_id: detailInfo.value.id,
			page: qaPage.value,
			pageSize: 5,
		},
			"get"
		)
		.then((res) => {
			if (qaPage.value === 1) {
				qaInfo.value = res.data
				tabItems.value[2].desc = "问答(" + res.data.pageInfo.total + ")"
			}
			qaPage.value++
			if (res.data.items.length > 0) {
				qaList.value = qaList.value.concat(res.data.items)
				console.log('qaList.value', qaList.value)

				qaLoading.value = true
			}
		});
}

const subQ = () => {

	// 订阅消息
	if (!isSettings.value) {
		wx.requestSubscribeMessage({
			tmplIds: ['SRHUcdYkXWzI7j4FLC5_CeZklF8TKqqyZk-m6ytA8xc'],
			success(res) {
				console.log('res', res)
				utils.subscribeMessage(res)
			},
			complete(res) {
				submit()
			}
		})
	} else {
		submit()

	}

}
const submit = () => {
	utils
		.request(
			api.putQuestion, {
			product_id: detailInfo.value.id,
			content: questionContent.value
		},
			"post"
		)
		.then((res) => {
			questionContent.value = ''
			close()
			qaPage.value = 1
			qaList.value = []
			qaLoading.value = true
			getProductQAData()
		});


}
const goDetail = (id) => {
	uni.navigateTo({
		url: '/subpackage/message/interlocutDetail?data=' + JSON.stringify({
			id: id,
			showPup: false
		})
	})
}

const selctTab = ref('');
const selectTabs = (idx) => {
	selctTab.value = idx
	evaluatePage.value = 1
	evaluateList.value = []
	evaluateLoading.value = true
	getProductEvaluateData()
}

const product_id = ref(null)
const group_id = ref('')
const share_user_id = ref('')
const timestemp = ref('')
const isSettings = ref(false)


function setProduct(options) {
	if (options.showCoupon && selectProJectitem.value.coupon_reduce_list?.length > 0) showQuan.value = true
	product_id.value = options.id;
	group_id.value = options.group_id ? options.group_id : '';
	share_user_id.value = options.share_user_id ? options.share_user_id : '';
	timestemp.value = options.timestemp ? options.timestemp : '';
}
onLoad((options) => {
	// startTime.value = performance.now()
	startTime.value = Math.floor(Date.now() / 1000)
	if (options.id) {
		setProduct(options)

		// 存储通过分享传入的参数 ()
		app.globalData.share_option = { ...options }
		getProductDetailData(options.id);
		getProductListData();
	} else if (options.scene) {
		const params = decodeURIComponent(options.scene).split('&');
		params.forEach(item => {
			const arr = item.split('=')
			if (arr[0] == 'product_id') {
				product_id.value = arr[1]
				getProductDetailData(product_id.value);
			} else if (arr[0] == 'group_id') {
				group_id.value = arr[1]
			} else if (arr[0] == 'share_user_id') {
				share_user_id.value = arr[1]
			}
		})
		getProductListData();
	} else if (app.globalData?.share_option?.id) {
		setProduct(options)

	}

	initShareParams()
	temVal.value = ['MVvQJRMgOYiit-qTYZ-Hbj2r-63wpLX8gaIQOlV6_IA', 'xENaH_EvcvM1mFr1mhWRkXd6GrwGFqGUcpEqcaQF90c']

	getSettingFun(temVal.value)

})
const temVal = ref([])
const getSettingFun = (temVal) => {
	wx.getSetting({
		withSubscriptions: true,

		success(res) {
			if (res.subscriptionsSetting.itemSettings) {
				isSettings.value = temVal.some(f => res.subscriptionsSetting.itemSettings[f])
			}
		}
	})
}
onReachBottom(() => {
	if (currentTab.value === 2 && evaluateLoading.value) {
		getProductEvaluateData()
	} else if (currentTab.value === 3 && qaLoading.value) {
		getProductQAData()
	} else if (currentTab.value === 4 && caseLoading.value) {
		getProductCaseData()
	}
})


// 响应式分享配置
const shareConfig = ref({
	title: '',
	path: '',
	imageUrl: '',
	queryParams: {} // 当前页面参数
})

// 获取页面栈实例
const currentPages = getCurrentPages()
const currentRoute = currentPages[currentPages.length - 1]

// 初始化分享参数
const initShareParams = () => {
	// 获取当前页面参数
	const query = currentRoute.options || {}
	if (!query.share_user_id) {
		const userInfo = uni.getStorageSync("userInfo")
		query.share_user_id = userInfo ? userInfo.id : ''
		query.timestemp = Math.floor(Date.now() / 1000)
	}

	const queryString = Object.keys(query)
		.map(key => `${key}=${query[key]}`)
		.join('&')
	// 更新分享配置
	shareConfig.value = {
		...shareConfig.value,
		path: `${currentRoute.route}?${queryString}`,
		queryParams: query
	}
	console.log('shareConfig.value', shareConfig.value)
}

// 触发分享操作
const triggerShare = () => {
	// 分享时 订阅任务奖励到账通知
	if (!isSettings.value) {
		wx.requestSubscribeMessage({
			// 任务奖励到账通知 / 访客来访提醒
			tmplIds: ['MVvQJRMgOYiit-qTYZ-Hbj2r-63wpLX8gaIQOlV6_IA', 'xENaH_EvcvM1mFr1mhWRkXd6GrwGFqGUcpEqcaQF90c'],
			// success(res) {
			// 	console.log('res', res)
			// }, fail(err) {

			// 	console.log('err', err)
			// },
			complete(res) {

			}
		})
	}

	initShareParams()
}

// 好友分享配置
onShareAppMessage(() => ({
	title: shareConfig.value.title,
	path: shareConfig.value.path,
	imageUrl: shareConfig.value.imageUrl,
	success(res) {
		uni.$emit('shareSuccess', {
			type: 'friend',
			data: shareConfig.value.queryParams
		})
	}
}))

// 朋友圈分享配置（需基础库2.11.3+）
onShareTimeline(() => ({
	title: shareConfig.value.title,
	query: shareConfig.value.path.split('?') || '',
	imageUrl: shareConfig.value.imageUrl
}))

const startTime = ref(0)
const duration = ref(0)
onUnload(() => {
	duration.value = Math.floor(Date.now() / 1000) - startTime.value
	if (share_user_id.value && timestemp.value && uni.getStorageSync("userInfo")) {
		utils
			.request(
				api.shareVisit, {
				share_user_id: share_user_id.value,
				timestemp: timestemp.value,
				seconds: Math.round(duration.value / 1000),
				product_id: product_id.value,
			},
				"post"
			)
			.then((res) => {

			});
	}
})
</script>

<style lang="scss" scoped>
.start {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

:deep(.textarea) {
	width: 100%;

}

.tiplist {
	padding: 0 20rpx 0 10rpx;
	height: 58rpx;
	background: #f1f1f1;
	border-radius: 34rpx 34rpx 34rpx 34rpx;
	margin-top: 20rpx;
	margin-right: 30rpx;
	// padding-left: 12rpx;

	.tip {
		width: 32rpx;
		height: 32rpx;
		background: #333333;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		line-height: 32rpx;
		margin-right: 12rpx;
	}
}

.example {
	.card_two {
		width: 690rpx;
		height: 122rpx;
		background: linear-gradient(180deg, #fbffdf 0%, #ffffff 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.card_three {
		width: 690rpx;
		// height: 850rpx;
		background: #f8f8f8;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.uchartsBox {
			width: 500rpx;
			height: 400rpx;
			border: 2rpx solid red;
			margin: auto;
		}
	}

	.case {
		width: 690rpx;
		background: #f8f8f8;
		border-radius: 40rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.caseItem {
			width: 650rpx;

			.detail {
				width: 170rpx;
				height: 54rpx;
				background: #ffffff;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.group {
				width: 138rpx;
				height: 174rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
			}

			.watch {
				width: 650rpx;
				height: 74rpx;
				background: linear-gradient(180deg,
						rgba(255, 255, 255, 0) 0%,
						#ffffff 100%);
				border-radius: 0rpx 0rpx 40rpx 40rpx;
				margin-top: 20rpx;
			}

			.avtor {
				border-radius: 50%;
			}

			.nameplate {
				width: 88rpx;
				height: 36rpx;
				background: #333333;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				line-height: 36rpx;
			}

			.tcard {
				padding-left: 20rpx;
				padding-right: 20rpx;
				height: 58rpx;
				background: #f1f1f1;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
			}
		}
	}
}

/* 弹窗容器定位 */
:deep(.up-popup) {
	position: fixed;
	left: 0;
	width: 100%;
	transition: bottom 0.3s;
	border-radius: 40rpx 40rpx 0 0 !important;

}

.popup {
	min-height: 350rpx;
	position: relative;

	.popup-close {
		position: absolute;
		top: 44rpx;
		right: 44rpx;
	}
}

.offers {
	// max-height: 30vh;
	height: 70vh;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	//border: 2rpx solid red;
	position: relative;
	padding: 40rpx;
	padding-bottom: calc(118rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(118rpx + env(safe-area-inset-bottom));

	.popup-close {
		position: absolute;
		top: 44rpx;
		right: 44rpx;
	}

	.scroll-Y-service {
		height: calc(100% - 128rpx + env(safe-area-inset-bottom));
	}

	.scroll-Y-price {
		// height: calc(100% - 118rpx);
		height: calc(100% - 58rpx + env(safe-area-inset-bottom));

		// height: 100%;
		.services {
			.sevice {
				// display: inline-block;
				box-sizing: border-box;
				padding-left: 20rpx;
				// width: 480rpx;
				// height: 58rpx;
				background: #F1F1F1;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				width: fit-content;
				max-width: 670rpx;
				// .txt{
				// 	max-width: 332rpx;
				// 	text-overflow: ellipsis;
				// 	white-space: nowrap;
				// 	overflow: hidden;
				// 	display: inline-block;
				// }

				.catch {
					width: 88rpx;
					height: 50rpx;

					background: #F8F8F8;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					flex-shrink: 0;
				}
			}

			.active {
				background: #FFFFFF;
				color: #333333;
				border: 2rpx solid #333333;
			}
		}
	}

	.card_8 {
		width: 670rpx;
		height: 164rpx;
		background: linear-gradient(90deg, #FBFFDF 0%, #F0EFFF 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #FFFFFF;

		.item {
			box-sizing: border-box;
			// padding-right: 30rpx;
			padding: 20rpx;
			border-right: solid 2rpx #fff;
		}

		.item:last-child {
			border: none;
		}
	}

	.card_9 {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.s_card {
			width: 630rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #F1F1F1;
			overflow: hidden;

			.left {
				height: auto;
				width: 108rpx;
				background: #F1F1F1;
				padding-top: 20rpx;
				padding-left: 20rpx;
			}

			.right {
				width: 522rpx;
				border-bottom: 2rpx solid #F1F1F1;
			}

			.flex:last-child {
				.right {
					border-bottom: none;
				}
			}
		}
	}

	.card_10 {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.hengxian {
		width: 670rpx;
		height: 0rpx;
		border-bottom: 2rpx solid #f1f1f1;
	}

	.list {
		height: calc(70vh - 228rpx + env(safe-area-inset-bottom));

		.scroll-Y {
			// height: 670rpx;
			height: 100%;

			.quanItem {
				.arrow {
					width: 182rpx;
					height: 144rpx;
					background: linear-gradient(90deg, #dbf046 0%, #ffee7e 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					.tip {
						padding: 4rpx;
						width: fit-content;
						background: #333333;
						border-radius: 20rpx 8rpx 8rpx 8rpx;
					}
				}

				.right {
					width: 488rpx;
					height: 144rpx;
					background: #ffffff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					.btn {
						width: 88rpx;
						height: 54rpx;
						background: #dbf046;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}

					.btnA {
						width: 112rpx;
						height: 54rpx;
						background: #333333;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}
				}
			}
		}
	}

	.btn {
		width: 170rpx;
		height: 58rpx;
		background: #f1f1f1;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}

	.popuItem {
		width: 152rpx;
		height: 72rpx;
		background: #f1f1f1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.active {
		background: #dbf046;
	}

	.content {
		width: 100%;
		height: calc(70vh - 240rpx + env(safe-area-inset-bottom));
		// height: 756rpx;

		//  border: #1746ff solid 2rpx;
		.scroll-Y {
			// height: 756rpx;
			height: 100%;
		}

		.neiriong {
			width: 670rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			//height: 1200rpx;
			.cardItem {
				width: 630rpx;
				//height: 148rpx;
				background: #f8f8f8;
				border-radius: 20rpx 20rpx;

				.border {
					border-bottom: 2rpx solid #f1f1f1;
					padding-bottom: 20rpx;
				}

				.down {
					transform: rotate(180deg);
				}

				.icon_quan {
					width: 32rpx;
					height: 32rpx;
					background: #ff0000;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
				}
			}

			.price {
				justify-content: flex-end;
				flex-direction: column;
				align-items: flex-end;
			}

			.jieshi {
				width: 630rpx;
				height: 264rpx;
				background: #fff3ec;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.pCard {
				width: 670rpx;
				// height: 542rpx;
				background: #ffffff;
				border-radius: 40rpx 40rpx 40rpx 40rpx;

				// border: 2rpx solid red;
				.samllCard {
					width: 630rpx;
					//height: 372rpx;
					background: #ffffff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 2rpx solid #f1f1f1;
					overflow: hidden;

					.line {
						height: 74rpx;

						.left {
							width: 200rpx;
							height: 76rpx;
							background: #f1f1f1;
						}

						.right {
							width: 460rpx;
							height: 74rpx;
							border-bottom: #F1F1F1 solid 2rpx;
						}
					}
				}
			}
		}
	}

	.img {
		width: 122rpx;
		height: 146rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
	}

	.card_3 {
		width: 670rpx;
		background: linear-gradient(180deg,
				rgba(241, 241, 241, 0) 0%,
				#f1f1f1 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.quan {
			width: 32rpx;
			height: 32rpx;
			background: #ff0000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			line-height: 32rpx;
		}
	}

	.proList {
		.scroll-x {
			white-space: nowrap;
			// width: 100%;
			width: 670rpx;
			overflow-x: hidden;
		}

		.project {
			display: inline-block;
			width: 210rpx;
			height: 88rpx;
			border-radius: 20rpx;
			background: #f1f1f1;
			margin-right: 20rpx;

			.img {
				width: 70rpx;
				height: 88rpx;
				border-radius: 20rpx;
			}

			.txt {
				width: 120rpx;
				white-space: normal;
			}
		}

		.active {
			background: #fff;
			border: #333333 solid 2rpx;
			color: #333333;
		}

		.active {
			.img {
				border: #333333 solid 2rpx;
			}
		}
	}

	.card_6 {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.card {
			width: 630rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #F1F1F1;
			overflow: hidden;

			.left {
				height: auto;
				width: 108rpx;
				background: #F1F1F1;
				padding-top: 20rpx;
				padding-left: 20rpx;
			}

			.right {
				width: 522rpx;
				border-bottom: 2rpx solid #F1F1F1;
			}

			.flex:last-child {
				.right {
					border-bottom: none;
				}
			}
		}
	}

	.card_7 {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
}

.bottomBtn {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 20rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 448rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.default {
		background: #F1F1F1;
		color: #999999;
	}
}

.interlocution {
	.card_one {
		width: 670rpx;
		height: 148rpx;
		background: linear-gradient(180deg, #fbffdf 0%, #ffffff 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.buttom {
			width: 170rpx;
			height: 54rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}

	.cardList {
		.card1 {
			width: 690rpx;
			background: #f8f8f8;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			.card2 {

				// width: 650rpx;
				// height: 246rpx;
				// background: #ffffff;
				// border-radius: 40rpx 40rpx 40rpx 40rpx;
				.huifu {
					width: 136rpx;
					height: 58rpx;
					background: #333333;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					color: #ffffff;
				}

				.left {
					width: 474rpx;
					// height: 146rpx;

					.wen {
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background: #333333;
						border-radius: 50%;
						flex-shrink: 0;
					}

					.da {
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background: #dbf046;
						border-radius: 50%;
						flex-shrink: 0;
					}
				}

				.right {
					width: 116rpx;
					height: 146rpx;
					border-radius: 40rpx;
					position: relative;

					.tubiao {
						z-index: 3;
						position: absolute;
						left: 12rpx;
						top: 12rpx;
					}
				}
			}

			.watch {
				width: 650rpx;
				height: 74rpx;
				background: linear-gradient(180deg,
						rgba(255, 255, 255, 0) 0%,
						#ffffff 100%);
				border-radius: 0rpx 0rpx 40rpx 40rpx;
			}
		}
	}
}

.pingjia {
	.haopin {
		width: 690rpx;
		height: 128rpx;
		background: linear-gradient(180deg, #fbffdf 0%, #ffffff 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.tabList {
		flex-wrap: wrap;
	}

	.tab {
		//width: 220rpx;
		//padding: 8rpx 12rpx;
		height: 58rpx;
		box-sizing: border-box;
		padding-top: 8rpx;
		padding-bottom: 8rpx;
		padding-left: 12rpx;
		padding-right: 12rpx;

		background: #f8f8f8;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.active {
		background: #dbf046;
		color: #666;
	}

	.thums {
		width: 690rpx;
		height: 108rpx;
		background: #f8f8f8;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
}

.payCard {
	position: fixed;
	z-index: 99;
	bottom: 0;
	width: 100%;
	// height: 240rpx;
	background: #F8F8F8;
	// border: 2rpx solid red;
	padding-bottom: env(safe-area-inset-bottom);

	.one {
		// width: 750rpx;
		padding: 0 20rpx;
		height: 74rpx;
		background: #fbffdf;
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		box-sizing: border-box;
	}

	.two {
		padding: 10rpx 20rpx;
		// width: 750rpx;
		height: 98rpx;
		background: #f8f8f8;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		box-sizing: border-box;


		.btn1 {
			// width: 192rpx;
			padding: 0 40rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.btn2 {
			padding: 0 40rpx;
			height: 78rpx;
			background: #f1f1f1;
			border-radius: 20rpx;
			color: #5a5a5a;
		}
	}

	.three {
		width: 750rpx;
		background: linear-gradient(92deg, #DBF046 0%, #BFFFBB 100%);
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.time {
			background: #9C0000;
			border-radius: 8rpx;
			padding: 2rpx 6rpx;
			font-weight: 800;
			font-size: 20rpx;
			color: #FFFFFF;
		}

		.time-i {
			margin-left: 2rpx;
			margin-right: 2rpx;
			font-weight: 800;
			font-size: 24rpx;
			color: #333333;
		}
	}
}

.shadow {
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
}

.btn {
	width: 650rpx;
	height: 74rpx;
	background: linear-gradient(180deg, rgba(248, 248, 248, 0) 0%, #ffffff 100%);
	border-radius: 0rpx 0rpx 40rpx 40rpx;
}

.tag {
	// padding-left: 12rpx;
	// padding-right: 12rpx;
	display: inline-block;
	line-height: 36rpx;
	height: 36rpx;
	background: linear-gradient(89deg, #dbf046 0%, #ffee7e 100%);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	box-sizing: border-box;
}

.live {
	height: 924rpx;
	position: relative;

	.back-box {
		width: 100vw;
		height: 180rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;

		.back {
			top: 88rpx;
			position: absolute;
			height: 88rpx;
			width: 100%;
			z-index: 999;
			display: flex;

			justify-content: flex-end;
			align-items: center;
			overflow: hidden;

			.text {
				width: 366rpx;
				text-align: center;

			}

			.icon {
				width: 28rpx;
				height: 48rpx;
				margin-left: 30rpx;
				// margin-right: 258rpx;
				margin-right: auto;

			}
		}
	}

	.back-box.active {
		background-color: #FFFFFF;
	}

	.top {
		position: absolute;
		top: 206rpx;
		width: 100%;

		.share {
			position: fixed;
			top: 206rpx;
			right: 35rpx;
			z-index: 999;
			margin-right: 20rpx;
			width: 116rpx;
			height: 52rpx;
			background: #dbf046;
			box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(62, 71, 0, 0.1);
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			.hidden-share-btn {
				opacity: 0;
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
		}

		.player {
			margin-left: 20rpx;
			width: 158rpx;
			height: 48rpx;
			background: #f8f8f8;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			//border: 2rpx solid #333333;
			.live-txt {
				font-weight: 800;
				font-size: 22rpx;
				color: #FF0000;
			}
		}
	}

	.playVideo {

		height: 924rpx;
		width: 750rpx;
		position: absolute;
		top: 0rpx;
		//border: 2rpx solid red;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #65675C;
	}

	.second {
		position: absolute;
		bottom: 80rpx;
		width: 100%;
		height: 80rpx;
		// border: 2rpx solid red;
		padding-left: 20rpx;

		.tip {
			// width: 160rpx;
			display: inline-block;
			height: 52rpx;
			background: rgba(0, 0, 0, 0.44);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			padding: 0 20rpx;
		}
	}

	.tabList {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(30rpx);
		-webkit-backdrop-filter: blur(30rpx);
		padding-left: 30rpx;

		.tab-item {
			font-size: 28rpx;
			color: #d1d1d1;

			.line {
				height: 24rpx;
				width: 2rpx;
				background-color: #D1D1D1;
				margin-left: 20rpx;
				margin-right: 20rpx;
			}
		}

		.tab-item:last-child {
			.line {
				display: none;
			}
		}

		.active {
			font-weight: 800;
			font-size: 28rpx;
			color: #ffffff;
		}
	}
}

.imgList {
	width: 750rpx;
	height: 128rpx;
	background: #f8f8f8;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	padding: 0 30rpx;
	box-sizing: border-box;

	.imgitem {
		width: 70rpx;
		height: 88rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: inline-block;
	}

	.active {
		border: 2rpx solid #333333;
		// box-sizing: border-box;
	}
}

.activity {
	width: 690rpx;
	height: auto;

	.imgs {
		width: 100%;
		// height: 100%;
	}
}

.posti {
	position: relative;
	padding: 20rpx 30rpx;
	box-sizing: border-box;

	.isSaleOut {
		position: absolute;
		width: 158rpx;
		height: 148rpx;
		right: 0rpx;
		top: 20rpx;
	}
}

.tag {
	// width: 88rpx;
	display: inline-block;
	line-height: 36rpx;
	height: 36rpx;
	background: linear-gradient(89deg, #dbf046 0%, #ffee7e 100%);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	padding: 0 4rpx;
	box-sizing: border-box;

}

.delft {
	text-decoration: line-through;
}

.discount {
	width: 690rpx;
	// height: 290rpx;
	background: linear-gradient(#fff3ec 0%, #f8f8f8 100%);
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	border: 2rpx solid #ffffff;

	.discount_item {
		flex-wrap: wrap;
	}

	.feesList {
		width: 650rpx;
		height: 122rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.fees {
			width: fit-content;
			min-width: 138rpx;
			height: 82rpx;
			background: linear-gradient(90deg, #dbf046 0%, #ffee7e 100%);
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			flex-direction: column;
		}
	}

	.get-btn {
		width: 650rpx;
		height: 74rpx;
		background: linear-gradient(180deg, rgba(248, 248, 248, 0) 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}
}

.vip {
	width: 690rpx;
	height: 120rpx;
	background: #333333;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/vipBg.png");
	background-size: 100% 100%;

	.open {
		width: 170rpx;
		height: 72rpx;
		background: #dbf046;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.prompt {
	width: 390rpx;
	height: 58rpx;
	background: #fbffdf;
	border-radius: 34rpx 34rpx 34rpx 34rpx;
	padding-left: 12rpx;
}

.tipList {
	display: flex;
	flex-wrap: wrap;

	.tipItem {
		// width: 136rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: 58rpx;
		background: #fff3ec;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}
}

.combo {
	width: 690rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.head {
		// display: flex;
		// align-items: flex-start;
		// justify-content: flex-start;
		// background-color: red;

		.headImg {
			// margin-top: auto;
			vertical-align: middle;

		}
	}

	.paihang {
		width: 650rpx;
		height: 74rpx;
		background: #f1f1f1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.type {
		width: 650rpx;
		height: 182rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.project {
	margin: auto;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	width: 650rpx;
	height: 408rpx;
	background: #ffffff;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	border: 2rpx solid #f1f1f1;
	position: relative;

	.absu {
		position: absolute;
		top: 88rpx;
		left: 54rpx;

		.iamg {
			width: 155rpx;
			height: 138rpx;
		}
	}

	.left {
		width: 222rpx;
		height: 274rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.right {
		flex: 1;
		height: 274rpx;

		.top {
			.tip {
				// width: 88rpx;
				height: 36rpx;
				background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}

		.domn {
			.price {
				width: 148rpx;
				height: 92rpx;
				background: linear-gradient(90deg,
						#fff5f3 0%,
						rgba(255, 245, 243, 0) 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.price2 {
				width: 148rpx;
				height: 92rpx;
				background: #fff;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}
	}

	.foot {
		width: 610rpx;
		height: 74rpx;
		background: linear-gradient(92deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
}

.compare {
	width: 690rpx;
	background: #333333;
	border-radius: 40rpx;
	background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/ompare.png");
	background-size: 100% 100%;

	.content {
		width: 690rpx;
		background: #f8f8f8;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.baicai {
			width: 294rpx;
			height: 58rpx;
			background: #dbf046;
			border-radius: 20rpx 20rpx 0rpx 20rpx;
		}

		.yenei {
			width: 294rpx;
			height: 58rpx;
			background: #f1f1f1;
			border-radius: 20rpx 20rpx 0rpx 20rpx;
		}
	}

	.vsPrice {
		width: 650rpx;
		// height: 130rpx;
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 100%);
		border-radius: 0rpx 0rpx 20rpx 20rpx;

		.item {
			width: 286rpx;
			height: 34rpx;
			text-align: right;
		}

		.item1 {
			width: 266rpx;
			height: 34rpx;
			text-align: left;
		}
	}

	.btn {
		width: 650rpx;
		height: 74rpx;
		background: linear-gradient(180deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
	}
}

.guanf {
	width: 690rpx;
	height: 440rpx;
	background: linear-gradient(90deg, #fbffdf 0%, #f0efff 100%);
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.rea {
		position: relative;
	}

	.pos {
		position: absolute;
		left: 36rpx;
		top: 36rpx;
	}

	.cont {
		width: 650rpx;
		height: 324rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.wh {
			width: 522rpx;
			height: 68rpx;
		}
	}
}

.mingxi {
	width: 170rpx;
	height: 58rpx;
	background: #f8f8f8;
	border-radius: 34rpx 34rpx 34rpx 34rpx;
}

.shoucang {
	// width: 280rpx;
	height: 58rpx;
	background: linear-gradient(95deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
	border-radius: 34rpx 34rpx 34rpx 34rpx;
	padding: 0 10rpx;
	box-sizing: border-box;
}

.sign {
	margin-top: 30rpx;
	width: 690rpx;
	min-height: 252rpx;
	background: linear-gradient(180deg, #fbffdf 0%, #ffffff 100%);
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.top {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.left {
			position: relative;
			flex: 1;
			height: 44rpx;

			.up {
				width: 100%;
				height: 44rpx;
				font-weight: 800;
				font-size: 32rpx;
				color: #333333;
				position: absolute;
				top: 0;
				left: 20rpx;
				z-index: 9;
			}

			.down {
				width: 100%;
				height: 44rpx;
				position: absolute;
				top: 14rpx;
				left: 20rpx;
				font-family: 'DIN COROS';
				font-weight: 400;
				font-size: 44rpx;
				line-height: 44rpx;
				color: #dbf046;
				opacity: 0.8;
				z-index: 2;
			}
		}

		.right {
			width: 176rpx;
			height: 54rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #dbf046;
			text-align: center;
			line-height: 54rpx;
			margin-right: 20rpx;
		}

		.more {
			width: 122rpx;
			margin-right: 20rpx;
			height: 54rpx;

			display: flex;
			justify-content: center;
			align-items: center;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #333333;

			.text {
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				margin-right: 8rpx;
			}

			.icon {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.mildle {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;

		.left {
			flex: 1;
			display: flex;
			margin-left: 20rpx;
			justify-content: space-evenly;
			align-items: center;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 110rpx;
				height: 116rpx;
				background: #ffffff;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 2rpx solid #f1f1f1;

				.icon {
					width: 32rpx;
					height: 32rpx;
				}

				.date {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}

		.right {
			margin-right: 20rpx;
			width: 252rpx;
			height: 114rpx;
			background: #dbf046;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}
	}

	.video {
		display: flex;
		width: 100%;
		justify-content: space-evenly;

		.one {
			width: 314rpx;
			height: 558rpx;
			background: #f1f1f1;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}
	}

	.player {
		position: relative;
		width: 650rpx;
		height: 370rpx;
		background: #dbf046;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.open {
			position: absolute;
			top: 22rpx;
			left: 32rpx;
			width: 158rpx;
			height: 48rpx;
			background: #fff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			//border: 2rpx solid #333333;
			opacity: 0.8;

			.pos {
				position: absolute;
				top: 8rpx;
				left: 10rpx;
			}

			.pos1 {
				position: absolute;
				top: 8rpx;
				left: 52rpx;
			}
		}
	}

	.next {
		.one {
			position: relative;
			width: 314rpx;
			height: 184rpx;
			background: linear-gradient(90deg,
					#1746ff 0%,
					#1746ff 34%,
					rgba(23, 70, 255, 0) 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			.btn {
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				width: 276rpx;
				height: 52rpx;
				background: #ffffff;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				opacity: 0.6;

				.pos {
					position: absolute;
					top: 10rpx;
					left: 10rpx;
				}

				.pos1 {
					position: absolute;
					top: 10rpx;
					left: 52rpx;
				}
			}
		}
	}
}

.teacher {
	width: 690rpx;
	height: 518rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_B {
	//border: 2rpx solid green;
	display: inline-block;
	width: 380rpx;
	height: 418rpx;
	background: #ffffff;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	border: 2rpx solid #f1f1f1;
	margin-right: 20rpx;

	.first {
		box-sizing: border-box;
		// border: #9c0000 solid 2rpx;
		width: 100%;
		height: 110rpx;
		padding: 12rpx;

		.avtor {
			border-radius: 50%;
			width: 72rpx;
			height: 72rpx;
			border: solid 2rpx #dbf046;

			.picture {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.name {}
	}

	.wordpress {

		width: 340rpx;
		height: 176rpx;
		background: #f8f8f8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.text {
			display: -webkit-box;
			word-break: break-all;
			white-space: pre-line;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
		}
	}

	.button {
		width: 170rpx;
		height: 54rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		color: #ffffff;
	}
}

.scroll-view-item_B:first-child {
	margin-left: 20rpx;
}

.pngpa {
	width: 690rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.pinpai {
		width: 650rpx;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		.pic {
			width: 650rpx;
			// height: 232rpx;
			// background: #000000;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			// opacity: 0.07;
			// background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/company_bg.png");
			// background-size: 100% 100%;
		}

		.cad {
			padding: 12rpx 20rpx;
			margin-right: 20rpx;
			background: #f1f1f1;
			border-radius: 34rpx;
		}
	}
}

.comInfo {
	width: 690rpx;
	// height: 2904rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.info {
		width: 144rpx;
		text-align: left;
	}

	.img {
		width: 650rpx;
		height: 380rpx;
		background: linear-gradient(48deg,
				#f87a20 0%,
				rgba(248, 122, 32, 0.98) 49%,
				rgba(248, 122, 32, 0) 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.office {
		width: 650rpx;
		height: 116rpx;
		background: #f1f1f1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.thrumb {
	width: 690rpx;
	height: 108rpx;
	background: #F8F8F8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.avtor {
		position: relative;

		.img {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.img2 {
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
		}
	}

}

.btn_box {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	background-color: #F8F8F8;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	// z-index: 9999;

	.btn_left {
		width: 132rpx;
		height: 54rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		line-height: 54rpx;
		text-align: center;
	}

	.btn {
		width: 192rpx;
		height: 78rpx;
		background: #F1F1F1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
		line-height: 78rpx;
		font-size: 28rpx;

	}

	.box {
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 98rpx;


		.add {
			color: #DBF046;
			background-color: #333333;
		}

		.domn_box_btnNoadd {
			color: #fff;

		}
	}


}

.delete_box {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9999;


	.bg {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #000;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.delete_model {
		position: absolute;
		background-color: #fff;
		text-align: center;
		width: 518rpx;
		// height: 386rpx;
		top: calc(50% - (386rpx / 2));
		left: calc(50% - (518rpx / 2));

		.text {
			// padding: 20rpx;
			min-height: 140rpx;
		}

		.btn_model {
			margin-bottom: 30rpx;

			.btns {
				width: 184rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #333;
				background-color: #F8F8F8;
			}

			.sunbmit {
				background-color: #333;
				color: #DBF046;
			}
		}
	}

}
</style>